vue打包性能优化核心方案

打包不生成map文件

我们通常项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。打包生成的map文件的作用就在于，map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

我们可以设置不生成map文件，从而减少包的体积

module.exports = {
  productionSourceMap: false,
}

通过在vue.config.js将 productionSourceMap 参数设置为false即可

使用gzip压缩

gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多，需要nginx也启用gzip

安装依赖（适用于vue-cli3，vue2自寻）
npm i --save-dev compression-webpack-plugin@5.0.1

对vue.config.js进行配置打包 使用gzip压缩
// 引入依赖
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'];

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名

        threshold: 10240, // 对超过10K的数据进行压缩

        minRatio: 0.8, // 极小比
      }),
    ]
  },
}

运行npm run build后出现gz结尾的文件就成功了

移除预加载

众所周知，如果你的项目比较大，vue的默认预加载机制，首屏加载真的巨慢，很多人开发，初始化的时候会预加载几百个js。但是比如跳转到我的页面很多预加载的js根本没有必要加载。

这个时候我们可以关闭预加载

chainWebpack: (config) => {
  // 移除预加载
  config.plugins.delete('prefetch')
}

忽略调试代码

忽略调试代码，使用UglifyJsPlugin去掉console 可以略微降低文件大小：

config.plugins.push(
  // 使用UglifyJsPlugin去掉console 可以略微降低文件大小
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: { drop_console: true, drop_debugger: true },
    },
  })
);