Javascript 带有压缩网页包插件的网页包预渲染spa插件。index.html未压缩
我正在构建一个安装了vue cli插件压缩和vue cli插件prerender spa的vue cli 3应用程序。(在引擎盖下,使用prerender spa插件和压缩网页包插件) prerender spa插件将index.html重命名为app.html。然后预渲染app.html并将生成的html存储在新的index.html中。页面已正确预呈现,app.html已正确压缩。但是,结果index.html(作为预呈现结果的页面)不是gzip。我怎样才能得到预渲染的结果也被gzip压缩呢 以下是我的vue.config.js:Javascript 带有压缩网页包插件的网页包预渲染spa插件。index.html未压缩,javascript,vue.js,webpack,single-page-application,prerender,Javascript,Vue.js,Webpack,Single Page Application,Prerender,我正在构建一个安装了vue cli插件压缩和vue cli插件prerender spa的vue cli 3应用程序。(在引擎盖下,使用prerender spa插件和压缩网页包插件) prerender spa插件将index.html重命名为app.html。然后预渲染app.html并将生成的html存储在新的index.html中。页面已正确预呈现,app.html已正确压缩。但是,结果index.html(作为预呈现结果的页面)不是gzip。我怎样才能得到预渲染的结果也被gzip压缩呢
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,
}
}
}
};
因此,事实证明prerender spa插件已经过时,并且只适用于webpack 4,大多数问题都在webpack 5中用新的钩子解决了 因此,我重构了prerender spa插件的代码库以适用于webpack 5(并且仅适用于它),我还必须删除一些功能,如html缩小,因为现在其他压缩插件将正确运行在html上 您可以在npm上找到该包 要使用webpack 5,您需要将vue cli插件更新为alpha版本 截至撰写时:
"@vue/cli-plugin-babel": "~5.0.0-alpha.5",
"@vue/cli-plugin-eslint": "~5.0.0-alpha.5",
"@vue/cli-plugin-router": "~5.0.0-alpha.5",
"@vue/cli-service": "~5.0.0-alpha.5",
"compression-webpack-plugin": "^6.1.1",
"html-webpack-plugin": "^5.3.1",
...
确保所有其他依赖项也已更新(Eslint和所有网页包插件和加载程序)
这可能会变成大量的尝试和错误,以使它在一次大的更新后编译,但麻烦是值得的
如果您对我的软件包的使用有任何疑问,请告诉我我一直在寻找解决此问题的方法,但prerender插件会在所有其他问题之后运行。。很遗憾,它不会工作,我想在我离开那个项目之后,你需要重新运行一个压缩脚本,但答案看起来不错。所以我接受这个答案!
"@vue/cli-plugin-babel": "~5.0.0-alpha.5",
"@vue/cli-plugin-eslint": "~5.0.0-alpha.5",
"@vue/cli-plugin-router": "~5.0.0-alpha.5",
"@vue/cli-service": "~5.0.0-alpha.5",
"compression-webpack-plugin": "^6.1.1",
"html-webpack-plugin": "^5.3.1",
...