极客时间对于推广渠道会有返利优惠，比如山月在极客时间买了一门课，再把课程分享给好友购买，这时极客时间会向山月返利20元左右。

而我现在做了一个返利平台，你可以在上边通过山月的链接购买课程，此时极客时间会向我返利。为了共同学习，而你可以添加我的微信 (shanyue94)，我将把极客时间给我的返利发一个红包全部返给你。

# 如何提升 webpack 的构建速度

使用 speed-measure-webpack-plugin (opens new window) 可评估每个 loader/plugin 的执行耗时。

# 持久化缓存: cache

webpack5 内置了关于缓存的插件，可通过以下配置开启。它将 Module、Chunk、ModuleChunk 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。

{
  cache: {
    type: 'filesystem'
  }
}

如对一个 JS 文件配置了 eslint、typescript、babel 等 loader，他将有可能执行五次编译，被五次解析为 AST

acorn: 用以依赖分析，解析为 acorn 的 AST
eslint-parser: 用以 lint，解析为 espree 的 AST
typescript: 用以 ts，解析为 typescript 的 AST
babel: 用以转化为低版本，解析为 @babel/parser 的 AST
terser: 用以压缩混淆，解析为 acorn 的 AST

而当开启了持久化缓存功能，最耗时的 AST 解析将能够从磁盘的缓存中获取，再次编译时无需再次进行解析 AST。

得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验

在 webpack4 中，可使用 cache-loader (opens new window) 仅仅对 loader 进行缓存。需要注意的是该 loader 目前已是 @depcrated 状态。

module.exports = {
  module: {
    rules: [
      {
        test: /\.ext$/,
        use: ['cache-loader', ...loaders],
        include: path.resolve('src'),
      },
    ],
  },
};

# 多进程: thread-loader

thread-loader 为官方推荐的开启多进程的 loader，可对 babel 解析 AST 时开启多线程处理，提升编译的性能。

module.exports={
  module:{
    rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader: 'thread-loader',
            options: {
              workers: 8
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

在 webpack4 中，可使用 happypack plugin (opens new window)，但需要注意的是 happypack 已经久不维护了。

关于山月

我的项目：

我的微信：shanyue94，欢迎交流