Webpack预览器-spa-带压缩的插件-webpack-插件。未压缩的index.html

Webpack prerender-spa-plugin with compression-webpack-plugin. index.html not compressed(Webpack预览器-spa-带压缩的插件-webpack-插件。未压缩的index.html)

本文介绍了Webpack预览器-spa-带压缩的插件-webpack-插件。未压缩的index.html的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建一个Vue cli 3应用程序,其中安装了vue-cli-plugin-presse和vue-cli-plugin-prerender-spa。(在引擎盖下,这些插件使用prerender-spa-plugin和压缩-webpack-plugin)。

prerender-spa-plugin将index.html重命名为app.html。然后,它预先呈现app.html并将生成的html存储在新的index.html中。页面被正确地预渲染,app.html被正确地压缩。但是,生成的index.html(预渲染的结果页面)是而不是gziping。我怎样才能让预览器的结果也被压缩?

这是我的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');
},

推荐答案

所以,原来预渲染-spa-plugin已经过时了,只能在webpack 4中使用,webpack 5中的大部分问题都已经用新的钩子解决了

所以我重构了prerender-spa-plugin的代码库以支持webpack 5(并且只针对它),我还不得不去掉一些功能,比如html缩写,因为现在其他压缩插件可以在html上正确运行

您可以在NPMprerender-spa-plugin-next

上找到该包

您需要将VUE线索插件更新到Alpha版本才能使用webpack 5

截至撰写:

"@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和所有webpack插件和加载器)

这可能会在较大的更新后进行大量的尝试和错误的编译,但麻烦是值得的

如果您对我的包的使用有任何疑问,请告诉我

这篇关于Webpack预览器-spa-带压缩的插件-webpack-插件。未压缩的index.html的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Webpack预览器-spa-带压缩的插件-webpack-插件。未压缩的index.html

基础教程推荐