vue前端脚本压缩

引言

为了解决Vue项目在打包后项目过大，导致用户端界面进去时间太长的问题。需要对vue打包的时候做脚本做分析、优化脚本引入流程及对最终打包进行压缩优化操作。

1 使用webpack-bundle-analyzer分析打包后的各种node_modules占用大小

• 1.1、安装分析的npm库，包括cross-env和webpack-bundle-analyzer

npm install webpack-bundle-analyzer --save-dev
npm install cross-env --save-dev

• 1.2、修改vue.config.js配置

export defaults {
    ...
    chainWebpack(config) {
        // 开启打包分析
        ...
        if (process.env.NODE_ENV === 'production') {
          config
              .plugin('webpack-bundle-analyzer')
              .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }
    }
}

• 1.3、package.json里增加分析脚本

{
  "scripts": {
    // 增加一个脚本
    "analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  }
}

• 1.4、在命令行上启动

npm run analyze

可以看到如下截图的效果

2 使用compression-webpack-plugin安装插件

• 2.1、安装打包压缩的npm库，包括compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

• 2.2、修改vue.config.js配置

const CompressionPlugin = require('compression-webpack-plugin')
export defaults {
    ...
    chainWebpack(config) {
        // 开启压缩
        config.plugin('compressionPlugin')
             .use(new CompressionPlugin({
                  filename: '[path].gz[query]',
                  // 压缩方法
                  algorithm: 'gzip',
                  // 超过10k的才会压缩
                  threshold: 10240,
                  // 压缩比例0.8
                  minRatio: 0.8
        }));
    }
}

• 2.3、package.json里增加分析脚本

{
  "scripts": {
    // 增加一个参数
    "build": "vue-cli-service build --mode production"
  }
}

• 2.4、使用下面命令进行打包

npm run build

• 2.5 最后需要在部署服务器的代理上开启gzip,以nginx作为反向代理为例，开启如下配置

...
http {

    gzip on;
    gzip_static on;
    gzip_min_length 1k;
    gzip_buffers 4 32k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-icon;
    gzip_vary on;
    gzip_disable "MSIE [1-6].";

}

3、常见错误

• 3.1 报错：Cannot read property ‘tapPromise’ of undefined
  解决方案：降低compression-webpack-plugin版本

npm install compression-webpack-plugin@5.0.1 --save-dev