第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Webpack prerender-spa-plugin 和 compression

Webpack prerender-spa-plugin 和 compression

慕標(biāo)琳琳 2022-12-29 15:12:43
我正在構(gòu)建一個(gè)安裝了 vue-cli-plugin-compression 和 vue-cli-plugin-prerender-spa 的 vue cli 3 應(yīng)用程序。(在引擎蓋下,這些使用 prerender-spa-plugin 和 compression-webpack-plugin)。prerender-spa-plugin 將 index.html 重命名為 app.html。然后預(yù)呈現(xiàn) app.html 并將生成的 html 存儲(chǔ)在新的 index.html 中。頁面已正確預(yù)呈現(xiàn),并且 app.html 已正確壓縮。但是,生成的 index.html(作為預(yù)呈現(xiàn)結(jié)果的頁面)未壓縮。我怎樣才能讓預(yù)渲染的結(jié)果也被 gzip 壓縮?這是我的 vue.config.js:module.exports = {  devServer: {    port: 3000  },  configureWebpack: {    devtool: 'source-map'  },  pluginOptions: {    prerenderSpa: {      customRendererConfig: {        injectProperty: '__PRERENDER_INJECTED',        inject: {},      },      registry: undefined,      renderRoutes: [        '/'      ],      useRenderEvent: true,      headless: true,      onlyProduction: true,      postProcess: route => {        // Defer scripts and tell Vue it's been server rendered to trigger hydration        route.html = route.html          .replace(/<script (.*?)>/g, '<script $1 defer>')          .replace('id="app"', 'id="app" data-server-rendered="true"');        return route;      }    },    compression:{      gzip: {        filename: '[path].gz[query]',        algorithm: 'gzip',        test: /\.(js|js\.map|css|html)$/,        minRatio: 0.8,      }    }  }};我嘗試在壓縮前進(jìn)行預(yù)渲染,但它并沒有改變?nèi)魏螙|西:chainWebpack: (config) => {  config.plugin('pre-render').before('gzip-compression');  config.plugin('gzip-compression').after('html');},
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

所以,事實(shí)證明 prerender-spa-plugin 已經(jīng)過時(shí)并且只適用于 webpack 4,大多數(shù)問題已經(jīng)在 webpack 5 中用新的鉤子解決了

所以我重構(gòu)了 prerender-spa-plugin 的代碼庫以適用于 webpack 5(并且僅適用于它),我還必須刪除一些功能,如 html 縮小,因?yàn)楝F(xiàn)在其他壓縮插件將在 html 上正確運(yùn)行

你可以在 npm prerender-spa-plugin-next上找到這個(gè)包

您需要將 vue cli 插件更新到版本 ^5 才能使用 webpack 5

在撰寫本文時(shí):

"@vue/cli-plugin-babel": "^5.0.4",

"@vue/cli-plugin-eslint": "^5.0.4",

"@vue/cli-plugin-router": "^5.0.4",

"@vue/cli-service": "^5.0.4",

"compression-webpack-plugin": "^6.1.1",

"html-webpack-plugin": "^5.3.1",

...

確保所有其他依賴項(xiàng)也已更新(Eslint 和所有 webpack 插件和加載器)


這可能會(huì)變成大量的試驗(yàn)和錯(cuò)誤,讓它在大更新后編譯,但麻煩是值得的


如果您對(duì)我的包裹的使用有任何疑問,請(qǐng)告訴我


查看完整回答
反對(duì) 回復(fù) 2022-12-29
  • 1 回答
  • 0 關(guān)注
  • 202 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)