慕標琳琳
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 插件和加載器)
這可能會變成大量的試驗和錯誤,讓它在大更新后編譯,但麻煩是值得的
如果您對我的包裹的使用有任何疑問,請告訴我
添加回答
舉報
0/150
提交
取消