阅读 657

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

前言

打包不优化,亲人泪两行,附图(未优化前):

未优化前

分析打包后各文件的体积

安装webpack插件webpack-bundle-analyzer
执行命令npm install --save-dev webpack-bundle-analyzeryarn 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.jsonscripts里配置"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; # 压缩的类型
复制代码

优化完成

优化完成效果图