亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Webpack prerender-spa-plugin 和 compression

Webpack prerender-spa-plugin 和 compression

慕標琳琳 2022-12-29 15:12:43
我正在構建一個安裝了 vue-cli-plugin-compression 和 vue-cli-plugin-prerender-spa 的 vue cli 3 應用程序。(在引擎蓋下,這些使用 prerender-spa-plugin 和 compression-webpack-plugin)。prerender-spa-plugin 將 index.html 重命名為 app.html。然后預呈現 app.html 并將生成的 html 存儲在新的 index.html 中。頁面已正確預呈現,并且 app.html 已正確壓縮。但是,生成的 index.html(作為預呈現結果的頁面)未壓縮。我怎樣才能讓預渲染的結果也被 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,      }    }  }};我嘗試在壓縮前進行預渲染,但它并沒有改變任何東西:chainWebpack: (config) => {  config.plugin('pre-render').before('gzip-compression');  config.plugin('gzip-compression').after('html');},
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

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

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

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

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

在撰寫本文時:

"@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",

...

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


這可能會變成大量的試驗和錯誤,讓它在大更新后編譯,但麻煩是值得的


如果您對我的包裹的使用有任何疑問,請告訴我


查看完整回答
反對 回復 2022-12-29
  • 1 回答
  • 0 關注
  • 205 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號