記一次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; # 壓縮的類型
複製代碼

優化完成