webpack4 / webpack5 利用缓存提升二次启动速度

为啥要使用打包缓存

提升项目启动速度，提升开发体验，webpack的打包方式就是把项目内全部文件都走一遍loader和babel处理，所以项目文件内容越来越多，启动的时间就越来越长，随随便便就 run 一分钟。

webpack4 使用 hard-source-webpack-plugin

改插件原理就是把第一次run打包完的文件存在本地，当你 第二次 启动的时候，就会直接取本地已打包好的文件使用，从而大大减少项目启动速度。


<!-- vue.config.js 配置 -->
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
...
module.exports = {
  ...
  configureWebpack: (config) => {
    config.plugins.push(
      new HardSourceWebpackPlugin({
        cacheDirectory: './jenson/[confighash]', // 修改打包目录 dist/jenson
        // 自动清除配置
        cachePrune: {
          // 存储天数 10 day
          maxAge: 10 * 24 * 60 * 60 * 1000,
          // 最大存储 1G
          sizeThreshold: 1 * 1024 * 1024 * 1024,
        },
      }),
    )
  }
  ...
}

<!-- webpack.config 配置 -->
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
...
module.exports = {
  plugins: [
    <!-- 配置同上即可 -->
    new HardSourceWebpackPlugin()
  ],
}

配置完后启动之后，文件存储地址如下：

webpack5 自带功能 cache

webpack5 统一了持久化缓存的方案，有效降低了配置的复杂性。另外由于 webpack 提供了构建的 runtime，所有被 webpack 处理的模块都能得到有效的缓存，大大提高了缓存的覆盖率，因此 webpack5 的持久化缓存方案将会比其他第三方插件缓存性能要好很多。

官网地址：webpack.docschina.org/configurati…

module.exports = {
  ...
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
    buildDependencies: {
      config: [__filename],
    },
  },
  ...
}

配置完后启动之后，文件存储地址如下：