Question

我正在构建一个安装了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（作为预渲染结果的页面）未压缩为。我如何也可以压缩预渲染的结果？

这是我的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

所以，事实证明 prerender-spa-plugin 已经过时了，只适用于 webpack 4，大部分问题在 webpack 5 中已经用新的钩子解决了

因此，我重构了 prerender-spa-plugin 的代码库以适用于 webpack 5（并且仅适用于它），我还必须删除一些功能，例如 html 缩小，因为现在其他压缩插件可以在 html 上正确运行< /p>

你可以在 npm prerender-spa-plugin-next

上找到这个包

您需要将 vue cli 插件更新到 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插件的Webpack prerender-spa插件。 index.html未压缩

1 个答案: