记一次vue-cli3 webpack简单性能优化

前言

打包不优化，亲人泪两行，附图（未优化前）：

分析打包后各文件的体积

安装webpack插件webpack-bundle-analyzer
执行命令npm install --save-dev webpack-bundle-analyzer或yarn add -D webpack-bundle-analyzer

这是一款可视化分析webpack打包后各文件体积的插件
再vue.config.js里添加如下代码：

module.exports = {
  chainWebpack: config => {
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}

普通webpack项目配置方式：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

再package.json的scripts里配置"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
别忘记安装cross-env。

配置完成后，执行npm run analyz命令。

运行完毕后，浏览器打开http://127.0.0.1:8888/，可以看到如下内容：

CDN资源引入

尽可能将所有第三方库使用cdn引入，参考文章

在vue.config.js文件中添加如下设置：

chainWebpack: config => {
  config.externals({
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    echarts: 'echarts',
    moment: 'moment',
    tinymce: 'tinymce',
    nprogress: 'NProgress',
    ...
  })
},

属性名是引入的模块名，值是需要替换的变量，这个值必须和 cdn 中提供的一样，其作用是不打包使用外部引入的扩展，也就是 build 的时候不打包这也模块。详见 webpack 外部扩展。

同时修改public/index.html，引入CDN资源

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" crossorigin="anonymous"></script>
...

script 元素中设置了 crossorigin 属性，避免跨域的警告，详见 CORS settings attributes 。

代码分割

再vue.config.js添加如下代码（vue-cli3默认已添加）：

chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all'
    })
}

开启Gzip压缩

执行npm i compression-webpack-plugin --D安装依赖compression-webpack-plugin

在vue.config.js配置如下代码：

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

configureWebpack: config => {
    const plugins = [];

        // Begin 生成 gzip 压缩文件
    plugins.push(
        new CompressionWebpackPlugin({
            filename: "[path].gz[query]",
            algorithm: "gzip",
            test: productionGzipExtensions,
            threshold: 10240,
            minRatio: 0.8
        })
    );
    // End 生成 gzip 压缩文件
        
    config.plugins = [...config.plugins, ...plugins];
}

并在nginx配置如下代码：

gzip  on;           # 开启Gzip压缩
gzip_min_length 1k; # 大于1K的文件才会压缩
gzip_buffers 4 16k; # 压缩的缓存区，可以不用管，照写就是。
gzip_comp_level 3;  # 压缩的级别，越高，压缩的文件越小，但是压缩的时间比较长。
gzip_types text/plain text/css application/xml application/javascript application/x-javascript text/javascript; # 压缩的类型

优化完成