Webpack预制板-温泉-插件与压缩-webpack-插件。index.html未压缩

Question

我正在建立一个vue cli 3应用程序与vue-cli-插件压缩和vue-cli-插件-预制板-水疗安装。(在引擎盖下，这些插件使用预制板-温泉插件和压缩-webpack插件)。

这个预制板-spa插件将index.html改名为app.html。然后，它预先录制app.html，并将生成的html存储在一个新的index.html中。该页面是正确的预录制和app.html正确压缩。但是，生成的index.html (该页面是预录制的结果)不是gzipped。我怎样才能得到预录制机的结果呢？

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

Answer 1

因此，事实证明，预制板-spa插件已经过时，只适用于webpack 4，大多数问题都是用新钩子解决的。

因此，我重新分析了prerender spa-plugin的代码库，以便为webpack 5工作(而且只适用于它)，我还必须删除一些特性，比如html小型化，因为现在其他压缩插件将正确地在html上运行。

您可以在npm 预制板-水疗-插件-下一个上找到该包。

您需要将vue cli插件更新为使用webpack 5的版本^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插件和加载程序)

这可能会导致大量的尝试和错误，让它在一次大的更新之后进行编译，但麻烦是值得的。

如果你对我的包裹的使用有任何疑问，请告诉我。