查漏补缺——说说怎么使用Webpack对网站进行优化

问题

如题所示

答案

【包真】我的第一次webpack优化，首屏渲染从9s到1s

vue-cli webpack 首屏加载性能优化

综上所述，我把代码中的这两行代码修改了：

Vue配置compression-webpack-plugin实现Gzip压缩

但是出现像上面的问题，按照上面进行修改，将build文件夹下的webpack.prod.conf.js代码中的asset修改为filename：

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

但是，还是出现错误，不过按照上面的文章做了修改，是可以打包成功的：

修改之前网站加载的一些参数如下：

修改之前，网站加载完成需要的时间是5290ms

修改之后网站加载的一些参数如下：

修改之后，网站加载完成需要的时间是1950ms

可喜可贺，经过第一次优化，网站加载的时间从5290ms缩短到了1950ms，平均为每个用户节省了3340ms。