一、基础

module和chunk的区别

  • module：每个 import 引入的文件就是一个模块（也就是直接手写的代码）。
  • chunk：当 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk（也就是 module 在 webpack 处理时是 chunk）。
  • bundle：是对 chunk 进行压缩等处理后的产出（也就是打包后可以直接运行的文件）。

chunk 有三种：

  1. 项目入口（ entry ）；
  2. import 动态引入的代码；

  3. 通过 splitChunks 拆分出来的代码。

    性能优化

  4. 不要让 loader 做太多事情——以 babel-loader 为例

最常见的优化方式是，用 include 或 exclude 来帮我们避免不必要的转译，比如 webpack 官方在介绍 babel-loader 时给出的示例：

  1. module: {
  2.   rules: [
  3.     {
  4.       test: /\.js$/,
  5.       exclude: /(node_modules|bower_components)/,
  6.       use: {
  7.         loader: 'babel-loader',
  8.         options: {
  9.           presets: ['@babel/preset-env']
  10.         }
  11.       }
  12.     }
  13.   ]
  14. }

这段代码帮我们规避了对庞大的 node_modules 文件夹或者 bower_components 文件夹的处理。但通过限定文件范围带来的性能提升是有限的。除此之外，如果我们选择开启缓存将转译结果缓存至文件系统，则至少可以将 babel-loader 的工作效率提升两倍。要做到这点，我们只需要为 loader 增加相应的参数设定：

  1. loader: 'babel-loader?cacheDirectory=true'
  1. 按需加载
  2. 删除冗余代码

一个比较典型的应用，就是 Tree-Shaking。

  1. 将 loader 由单进程转为多进程

happypack（不维护了）、thread-loader（推荐）