Vue-cli 中 Webpack 配置優化（一）

一、前言

最近一段時間在學習 Webpack 方面的知識。在學習的過程中主要配置的是 webpack.config.js 文件。

但是在 Vue-cli 3.x 下，已經對 Webpack 做了深度的封裝，很多已經是默認配置了，在這里就針對這些深入了解下，並區別說明下。

二、量化、分析

這里主要介紹兩個插件，分別是量化打包時間，和打包后分析的。

1、speed-measure-webpack-plugin

這個包可以測量各個插件和 loader 所花費的時間，構建完成后會顯示這樣的信息：

這樣在優化的時候就有了一個比較明確的對比概念。

安裝：

npm i speed-measure-webpack-plugin -D

使用：

Vue-cli 2.x 中如下

//webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

const config = {
    //...webpack配置
}

module.exports = smp.wrap(config);

Vue-cli 3.x 中如下（主要區別是包裹 configureWebpack ）

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin({
  outputFormat: 'human'
})
module.exports = {
  configureWebpack: smp.wrap({
    plugins: []
  })
}

這樣配置后，再次構建，就可以看到上面那樣的信息。

2、webpack-bundle-analyzer

這個是分析打包后，各個文件的大小，用於分析 bundle 的

安裝：

npm i webpack-bundle-analyzer -D

在 Vue-cli 3.x 下，安裝這個包會報錯，是因為用 Vue-cli 3.x 構建的項目在 node_modules 中已經存在，但是項目的 package.json 中沒有引用。

需要在 node_modules 中刪除這個包，重新安裝就可以。

使用：（下面是 Vue-cli 3.x）

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  configureWebpack: smp.wrap({
    plugins: [
      // 這個要放在所有 plugins 最后
      new BundleAnalyzerPlugin()
    ]
  })

在構建完成后，會直接啟動一個服務，有一個可視化的界面查看構建后的 bundle。

三、緩存

在這里也介紹兩個緩存的地方。

1、cache-loader

在一些性能開銷較大的 loader 前面添加 cache-loader，將結果緩存在磁盤中

安裝：

npm install cache-loader -D

使用：

在 Vue-cli 2.x 中

module.exports = {
    //...
    module: {
        //我的項目中,babel-loader耗時比較長，所以我給它配置了`cache-loader`
        rules: [
            {
                test: /\.jsx?$/,
                use: ['cache-loader','babel-loader']
            }
        ]
    }
}

在 Vue-cli 3.x 中，這個配置是默認的配置，分別對：【vue-loader、babel-loader】兩個進行了緩存，其他的需要緩存再自己配置。

2、hard-source-webpack-plugin

這個是為模塊提供中間緩存，效率提升很大。

安裝：

npm i hard-source-webpack-plugin -D

使用：

直接在 plugins 中 new 就可以。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
module.exports = {
  configureWebpack: smp.wrap({
    plugins: [
      // 為模塊提供中間緩存，緩存路徑是：node_modules/.cache/hard-source
      new HardSourceWebpackPlugin(),
      new BundleAnalyzerPlugin()
    ]
  })
}

構建后效果：

            

上面三副圖，分別是配置后第一次、第二次、第三次構建的，第三次構建可以達到的 80% 性能提升。

 

參考：

帶你深度解鎖Webpack系列(優化篇)

基於vue-cli的webpack打包優化實踐及探索