Webpack 5 的主要新功能与改进

1. Module Federation（模块联邦）✨ —— 微前端神器

这是 Webpack 5 最重磅的功能。 允许多个独立构建的应用之间 动态共享模块，甚至可以 在运行时加载远程的组件/代码。

适用于：

• 微前端架构
• 多团队协作的大型系统
• 动态按需加载远程模块

优点：

• 不用把公共代码打包进多个 bundle
• 允许不同项目使用不同版本的依赖（版本冲突自动处理）
• 真正实现 “应用级别的懒加载”

---

2. 更好的持久化缓存（Persistent Caching）🚀 构建速度大幅提升

Webpack 5 引入了 文件系统级别的持久缓存（filesystem cache），尤其是第二次构建能显著加速。

效果：

• 再次构建速度提升至少 2~5 倍
• 大型项目甚至能快 10 倍

使用（默认已开启）：

cache: {
  type: 'filesystem'
}

---

3. 内置多种优化的 Tree Shaking 改进（改进的副作用分析）

Webpack 5 会更好地判断哪些代码是 “纯函数/无副作用”，从而减少无效代码。

新增能力：

• 更准确识别无副作用的模块（package.json → "sideEffects": false）
• 提升生产环境下的 Dead Code Elimination

---

4. 移除 Node.js Polyfills（提高 Web 标准，同时减小 bundle）

Webpack 4 会自动 polyfill Node 核心模块（如 buffer、stream），Webpack 5 不再默认引入。

好处：

• 更小的 bundle
• 更符合浏览器运行环境

影响（如果你还想用）：

resolve: {
  fallback: {
    "crypto": false,
    "stream": require.resolve("stream-browserify"),
  }
}

---

5. 默认支持 Asset Modules（统一资源 loader）🖼️

Webpack 5 新增 Asset Modules，替代多种 loader：

以前需要：

• file-loader
• url-loader
• raw-loader

现在统一用：

type: 'asset/resource'
type: 'asset/inline'
type: 'asset/source'
type: 'asset'

优势：

• 配置更简单
• 智能选择内联还是发出独立文件（可自动判断文件大小）

---

6. Improved Code Splitting & 更智能的 Chunk 分割

Webpack 5 改进 SplitChunks：

• 更智能分析依赖图
• 更少重复代码
• 更稳定的 chunk 命名（提升缓存命中率）

---

7. 更强的长期缓存（Long-Term Caching）能力 🧠

Webpack 5 对以下做了优化：

• chunk IDs（更稳定）
• module IDs（更稳定）
• hashing 算法改进（真实只 hash 变更的模块）

结果：

• 浏览器缓存命中率提升
• 发布新版本时用户更新资源更少

---

8. 更好的 WebAssembly 支持（原生支持）🧩

Webpack 5：

• 支持标准的 WebAssembly
• 改进异步加载

让 JS 与 WASM 结合更顺畅。

---

9. 内置更强的开发体验

包括：

• 更快的 HMR（热更新）
• 更好的错误日志
• 自动清理老旧资源
• 默认更严格的依赖分析，提前发现潜在问题

---

📌 总结一句话

Webpack 5 的核心提升在于：Module Federation、持久化缓存、Asset Modules、优化的 Tree Shaking、改进的长期缓存机制，以及移除 Node polyfills 以减小 bundle。总体目标是更快、更轻、更适合微前端和现代 Web 架构。

---

webpack优化打包速度【2021年总结】

打包性能分析插件speed-measue-webpack-plugin

webpack打包流程

1. 根据配置文件找到入口文件
2. 通过loader对入口文件进行解析
3. 通过acorn解析js代码，生成ast语法树，根据语法树找到依赖文件，生成依赖图{id,filename,dependency,code}
4. 根据依赖图打包生成chunk包

抽象语法树演示 (opens new window)

可以通过importDeclaration下的source下的value获取引用模块。直到文件没有任何依赖时停止

耗时步骤：loader解析耗时、搜索耗时、打包耗时

缩短解析时间

有二个思路:😉

1. 减少处理的文件、缩小查找的范围
2. 开启多进程解析

一、减少处理文件、缩小查找的范围

1. noParse忽略不需要解析的文件，忽略的模块文件中不能使用import、require等语法
2. 指定resolve.extensions这样在不加扩展名的时候会依次尝试对添加的扩展名进行匹配
3. 设置resolve.alias指定具体路径及文件也可以加快查找速度
4. resolve.modules指定查找目录
5. module.rules加入oneOf这样规则只匹配一次找到一个后就不再继续查找
6. 当文件想在浏览器中全局能用时加入externals。比如引jquery可以通过模块访问jquery也可通过window访问
7. rules.include exclude指写哪些文件需要与不需要解析

二、开启多进程
多进程加速loader解析时间 因为happyPack作者已经不再维护，所以推荐使用thread-loader
put this loader in front of other loaders. the following loaders run in a worker pool.

可以通过预热worker pool将指定模块载入缓存

To prevent the high delay when booting workers it possible to warmup the worker pool.

This boots the max number of workers in the pool and loads specified modules into the node.js module cache.

cache-loader 也要放在最前面，如果与thread-loader同时的时候，建议thread-loader先开启。

开启webpack的cache

Cache the generated webpack modules and chunks to improve build speed.

• cache-loader 根据版本号文件名生成cacheKey做为文件的文件名，看文件是否存在，存在则通过对比mtime（modify time），如果相同return缓存，如果不同走下面的loader，它是一个轻量的，不对比内容的。
• babel-loader 通过文件内、option、版本号生成cacheKey做为文件的文件名，读文件是否已经存在，存在则使用缓存，不存在用bable-core转义、zlib压缩、fs写入缓存，它根据文件内容来缓存。它不影响其它loader。

webpack loader详解点击 (opens new window)

loader先从左往右执行它的pitch方法，再去执行它们的normal方法从右往左

缩短搜索时间

1. 指定resolve.extensions这样在不加扩展名的时候会依次尝试对添加的扩展名进行匹配
2. 设置resolve.alias指定具体路径及文件也可以加快查找速度
3. resolve.modules指定查找目录

缩短打包时间

1. 生成缓存chunk 当mode是development时默认配置cache:true
2. smaller == faster 使用数量更少、体积更小的library。 在多页面程序中使用SplitChunksPlugin移除未引用代码

optimization:{
    splitchunks: {
        chunks: 'all', // 默认只分割异步代码
        minSize: 0, // 分割出去的代码块的最小体积，0表示不限制
        maxSize: 0, // 分割出去的代码块的最大体积，0表示不限制
        minRemainingSize: 0, // 分割后剩下的体积，0表示不限制 webpack5新参数
        minChunks: 1,// 被多个入口引入几次会被分割
        maxAsyncRequest: 6, // 异步请求最大分割几个代码块
        maxInitialRequesta:6, // 同步请求，入口并行加载的最大请求数
        automaticNameDelimiter: '~', // 名称的分隔符
        enforceSizeThreshold: 50000, // 强制阈值， webpack5新参数
        cacheGroups: { // 缓存组配置， 配置如何对模块分组，相同分组会分到一个代码块中
            defaultVendors: { // 第三方模块
                test: /[\\/]node_modules[\\/]/, // 如果模块的路径匹配此正则
                priority: -10, // 优先级， 有很多缓存组，如果一个模块同属于多个缓存组，则哪个优先级高分到哪里
                reuseExitsingChunk: true, // 是否复用现有的代码块
            },
            default: {
                minChunks: 2, // 此模块被最少2次引用会被提取
                priority: -20, 
                reuseExistingChunk: true
            }
        }
    }
}

其他

DLL 在webpack4性能提升的情况下，它已经作用不大了，也可以用hard-source-webpack-plugin

noParse 不用解析的文件

IgnorePlugin 忽略语言文件之类的

webpack编译体积优化

压缩js、css、html和图片

• mini-css-extract-plugin 将js代码中混合的css抽离出来（不然执行js才能解析css）

  在将style-loader改为miniCssExtractPlugin.loader

  module:{
      rules:[
          // 抽离 css
          {
              test: /\.css$/,
              loader: [
                  MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                  'css-loader',
                  'postcss-loader'
              ]
          },
          // 抽离 less --> css
          {
              test: /\.less$/,
              loader: [
                  MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                  'css-loader',
                  'less-loader',
                  'postcss-loader'
              ]
          }]
  }
  

  在plugins中

  plugins: [
      new miniCssExtractPlugin({
          filename: 'css/main.[contentHash:8].css'
      })
  ]
  

• optimize-css-assets-webpack-plugin 优化和压缩css资源的文件

  optimization:{
      minimize: true, // 开启最小化
      minimizer:[new TerserJSPlugin({}), // 压缩js
      new OptimizeCSSAssetsPlugin({}) // 压缩css
      ]
  }
  

• terser-webpack-plugin优化和压缩js资源

• image-webpack-plugin对图片进行压缩和优化

  module:{
      rules: [
          {
              test: /\.(png|jpg|jp?g|gif)$/,
              use: [{
                  loader: 'url-loader',
                  options: {
                      // 小于 5kb 的图片用 base64 格式产出
                      // 否则，依然延用 file-loader 的形式，产出 url 格式
                      limit: 5 * 1024,
  
                      // 打包到 img 目录下
                      outputPath: '/img1/',
  
                      // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                      // publicPath: 'http://cdn.abc.com'
                  }
              },{
                  {
                      loader:'image-webpack-loader',
                      options:{
                          mozjpeg:{
                              progressive: true,
                          },
                          optipng: {
                              enabled: false
                          },
                          pngquant: {
                              quality: [0.65, 0.90],
                              speed: 4
                          },
                          gifsicle:{
                              interlaced: false,
                          },
                          webp: {
                              quality: 75
                          }
                      },
                  }
              }]
          },
      ]
  }
  

• 压缩html文件

  plugins:[
      new HtmlWebpackPlugin({
          template:'./src/index.html',
          minify:{
              collapseWhitespace: true, // 去掉空格
              removeComments: true // 去掉注释
          }
      })
  ]
  

• purgecss-webpack-plugin 清除用不到的css

  new PurgecssWebpackPlugin({
      paths: global.blob.sync(`${PATHS.src}/**/*`,{nodir: true}); // ** 匹配任意字符，包括路径分割符。   * 匹配任意字符，但不包括路径分隔符
      // const glob = require('glob') // 文件的匹配模式
      // const PATHS = {
      //    src: path.resolve(__dirname, 'src'),
      // }
  })