webpack5 打包优化

webpack5 新特性

• 通过持久化硬盘缓存能力来提升构建性能
• 尝试用更好的算法和默认值来改进长期缓存
• 尝试用更好的 Tree Shaking 和代码生成来改善包大小,内置 Tree Shaking 功能，Webpack5 对 Tree Shaking 进行了优化，在代码压缩方面表现更好。
• 尝试改善与网络平台的兼容性。
• 尝试在不引入任何破坏性变化的情况下，清理那些在实现 v4 功能时处于奇怪状态的内部结构。
• 通过引入一些重大的变更为未来的一些特性做准备，使得能够长期的稳定在 Webpack5 版本上

注意事项：

1. webpack5 需要node 版本为^10.13.0以上
2. 升级webpack^5 (next) , webpack-cli ^5(next) 版本
3. 升级webpack-dev-server 至 ^4(next) 版本
4. 升级相关plugin （html-webpack-plugin） loader 版本

查看npm包对应的最新版本号

cnpm install -g npm-check-updates

npm-check-updates

参照版本升级对应的npm 包，webpack 编译后会报一些错误和警告，多数是通过升级plugin 来解决

以下是升级时遇到的问题

1. Unknow option ‘-p’

明确 mode 更改命令为 webpack —mode production

2. TypeError: merge is not a function

   更改merge 引入方式

// const merge = require('webpack-merge');
const { merge } = require('webpack-merge');

3. TypeError:compiler.plugin is not a function

   升级webpack-cli 到最新版本

4. HappyPack webpack@5 不再维护

thread-loader 来替换 happyPack 来进行多进程打包

5. react-dnd 引发的报错， 通过升级 react-dnd react-dnd-html5-backend 来解决

6. html-webpack-plugin error

ERROR in Error: HtmlWebpackPlugin: could not load file xxx /dll_production_temp/ .dll.prod. .js

module.exports = {
  plugins: [
    new AddAssetHtmlPlugin([
      {
        glob: getPath(dllFilePath), // 修改filepath 为 glob
        publicPath: path.posix.join('/'),
        includeSourcemap: false,
      },
 ]
}

7. webpack-dev-sever 升级到^3[next] 版本

webpack5 优化配置

1. 使用 catch 配置项，启用文件系统缓存

module.exports = {
  // ...
  cache: {
    type: 'filesystem' , // 缓存类型，默认为 memory 
    version: '1.0' // 缓存版本号，默认为空字符串
    buildDependencies: {
      config: [__filename], // 依赖项
    },
  }
};

2. 优化 output 配置 ，使用 contenthash 命名文件

contenthash 只会在该文件内容发生变化是才会生成新的哈希值。从而减少浏览器的重复加载

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

3. 合理使用 cdn , 利用cdn 部署静态资源，以此来提高加载速度
4. 在配置文件中设置 mode :‘production’ 来开启生产模式，会自动开启优化策略，如代码压缩等。
5. 配置 splitChunk

module.exports = {
// ..
optimization: {
    splitChunks: {
      name: 'vendor',
      cacheGroups: {
        vendors: {
          // node_modules里的代码
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
          priority: 10, // 优先级
          enforce: true,
        },
      },
    },
  }
}

6. 使用 cache-loader 和 thread-loader 来加速构建过程

   cache-loader 和threa-loader 的顺序不能写错

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'thread-loader',
          'babel-loader'
        ],
        exclude: /node_modules/
      }
    ]
  },
};

webpack 构建效率

webpack 版本	第一次打包时间	第二次打包时间	第三次打包时间
webpack4	207.89s	204.13s	206.76s
webpack5	108.26 s	82.578s	77.15s

webpack 本地热更新对比

webpack 版本	初次构建	更改代码后二次构建	更改代码后三次构建
webpack4	38.73s	9.57s	9.12s
webpack5	35.17s	3.78s	2.31s

参考文章：

webpack.docschina.org/concepts/

segmentfault.com/a/119000004…

juejin.cn/post/684490…