vuecli3項目中webpack4配置優化

1. 正式環境去除console.log

若是在正式環境中須要去掉console.log,若是你發現設置terserOptions沒有效果，要從源頭分析下緣由了。

1） 多是vue-cli的版本不是最新的，例如我司一個項目中用的cli-service@3.0.5,另外一個項目用的cli-service@3.1.1看他們在正式環境的不一樣配置（@vue\cli-service\lib\config\prod.js）：

cli-service@3.0.5
const UglifyPlugin = require('uglifyjs-webpack-plugin')
const uglifyOptions = require('./uglifyOptions')
webpackConfig.optimization.minimizer([
     new UglifyPlugin(uglifyOptions(options))
])
複製代碼

cli-service@3.1.1
const TerserPlugin = require('terser-webpack-plugin')
const terserOptions = require('./terserOptions')
webpackConfig.optimization.minimizer([
    new TerserPlugin(terserOptions(options))
])
複製代碼

用的是兩個不一樣的壓縮插件，因此在配置時也要區分處理

cli-service@3.0.5
configureWebpack: config => {
    if(process.env.NODE_ENV === 'production'){
        config.optimization.minimizer[0].options.uglifyOptions.compress.warnings = false;
        config.optimization.minimizer[0].options.uglifyOptions.compress.drop_console = true;
        config.optimization.minimizer[0].options.uglifyOptions.compress.drop_debugger = true;
        config.optimization.minimizer[0].options.uglifyOptions.compress.pure_funcs = ['console.log'];
    }
}
複製代碼

cli-service@3.1.1
configureWebpack: config => {
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
    }
}
複製代碼

2）configureWebpack不是配置的一個函數而是一個對象。webpack文檔中說明若是configureWebpack爲一個對象，該對象將會被 webpack-merge 合併入最終的 webpack 配置。若是configureWebpack爲一個函數，你能夠基於環境有條件地配置，或者直接修改配置。可見對象會被merge函數是直接修改配置。若是將上面if語句中的代碼放在chainWebpack進行配置，就會報'options' of undefined的錯誤。此時就要藉助babel-plugin-transform-remove-console插件了。

babel.config.js
const plugins = [[
  "component",
  {
    "libraryName": "element-ui",
    "styleLibraryName": "../packages/theme-chalk/src",
    "ext":".scss"
  }
]]
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  "presets": [["@vue/app"]],
  "plugins": plugins
}
複製代碼

3）若是仍是沒有成功的話，就要檢查一下本身的webpack配置中有沒有重寫optimization了。 能夠經過命令vue inspect --mode=production > output.js來查看當前webpack的全部配置。

2.優化項目打包splitChunks中cacheGroups的配置

vue-cli3對cacheGroups的初始配置（@vue\cli-service\lib\config\prod.js）爲：

webpackConfig
    .optimization.splitChunks({
      cacheGroups: {
        vendors: {
          name: `chunk-vendors`,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: `chunk-common`,
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    })
複製代碼

可是項目中要引用的第三方組件和本身公司內部的組件庫，會致使這單個文件過大，頁面加載完成時間變長，因此要將element-ui等組件庫進行單獨打包。

3. 提升打包速度

將靜態資源文件（運行依賴包）與源文件分開打包，先使用DllPlugin給靜態資源打包，再使用DllReferencePlugin讓源文件引用資源文件。package.json中新加一條命令：

"dll": "webpack --config webpack.dll.config.js"
複製代碼

新建webpack.dll.config.js

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['vue/dist/vue.runtime.esm.js', 'vuex', 'vue-router', 'element-ui', 'axios']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),// 打包後文件輸出的位置
    library: 'dll_[name]'
  },
  plugins: [
    new CleanWebpackPlugin(), 
    new webpack.DllPlugin({
      name: 'dll_[name]',//和output. library保持一致
      path: path.join(__dirname, 'dll', '[name].manifest.json'),
      context: __dirname
    })
  ]
}
複製代碼

執行npm run dll生成dll文件夾，即生成了動態連接庫。

修改vue.config.js添加DllReferencePlugin的配置

vue.config.js
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const dllReference = (config) => {
  config.plugin('vendorDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./dll/vendor.manifest.json')
    }])
  config.plugin('addAssetHtml')
    .use(AddAssetHtmlPlugin, [
      [
        {
          filepath: require.resolve(path.resolve(__dirname, 'dll/vendor.dll.js')),
          outputPath: 'dll',
          publicPath: '/dll'
        }
      ]
    ])
    .after('html')
};

 chainWebpack: config => {
    if(process.env.NODE_ENV === 'production'){
      dllReference(config)
    }
  }
複製代碼

AddAssetHtmlPlugin插件的做用是添加js或者css資源到由html-webpack-plugin插件自動生成的文件中。

再執行npm run build能夠看到打包時間明顯縮短。

疑問：1）使用dll來優化打包速度須要執行兩條命令，npm run dll只須要執行一次。若是在Jenkins上打包就須要運維的支持，跟咱們這邊運維溝通，他們表示不太好處理，因此優化打包速度這個事我就放棄了。 2）

參考資料

vuecli3+webpack4優化實踐（刪除console.log和配置dllPlugin）