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

//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()
    ]
  })
}

构建后效果：