打包速度优化

webpack打包耗时分析优化

如何分析

speed-measure-webpack-plugin

它分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化

使用时要注意它与 mini-css-extract-plugin 的版本兼容问题，容易报错

You forgot to add 'mini-css-extract-plugin' plugin 

ProgressPlugin

webpack5内置的插件 ProgressPlugin 不仅可以看打包进度，还可以分析打包时间，只要将profile设置为true

  new ProgressPlugin({
      profile: true,
    })

优化方案

开启热模块替换

HotModuleReplacement（HMR/热更新）用于在运行时更新代码，而不需要进行完全的页面刷新或重新加载页面

webpack-dev-server搭配HotModuleReplacementPlugin 实现热更新

  devServer: {
     hot: true, // 开启HMR功能
  }

基本原理

1》当运行的时候，修改webpack.config.js的entry,插入两个runtime文件，一个用于与服务端进行通信websoket,另外一个用于模块的更新检查（监听文件变化）；启动http和websoket服务，进行编译

• 启动本地server，让浏览器可以请求本地的静态资源
• 启动websocket服务，用于浏览器和本地node服务器进行通信

2》当用户访问页面时，浏览器会与服务端简历websocket连接；随后服务端向浏览器发送hash 和 ok ,用来通知浏览器当前最新编译版本的hash值和告诉浏览器拉取代码。同时服务端，会根据路由，将内存中的文件返回，此时浏览器保存hash,页面内容出现。

• hash事件，更新最新一次打包后的 hash 值；
• ok事件，进行热更新检查

3》当修改本地代码时，会触发重新编译，并且（ webpackDevMiddleWare ）会将编译的产物保存到内存中，同时（ HotModuleReplacementPlugin ）会生成两个补丁包，这两个补丁包一个是用来告诉浏览器哪个chunk变更了，一个是用来告诉浏览器变更模块及内容。当重新编译完成，向浏览器发送hash 和 ok，浏览器收到后会执行module.hot.check进行模块热检查 ，向服务端获取两个补丁文件，进行更新

Include/Exclude

减小查找文件的范围，提高效率

      {
        test: /\.vue$/,
        use: ['thread-loader', 'vue-loader'],
        include: [path.resolve('src')], // 添加配置
        exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/,
      },

缓存

webpack5默认情况下，cache 会在开发模式下被设置成 memory 而且会在生产模式把cache 给禁用掉

1》文件缓存filesystem： cache: filesystem，来缓存生成的 webpack 模块和 chunk，改善构建速度，可以将构建过程的 webpack 模板进行缓存，大幅提升二次构建速度、打包速度

filesystem缓存到硬盘中，默认路径是 node_modules/.cache/webpack 目录下

cache: {
    type: 'filesystem' // 缩短第二次打包的事件
}

2》内容缓存 memory：告诉 webpack 在内存中存储缓存，不允许额外的配置

多线程

thread-loader

const os = require("os");
// cpu核数
const threads = os.cpus().length;
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "thread-loader", // 开启多进程
             options: {
               workers: threads, // 数量
             },
           },
          'babel-loader'
        ],
      },
    ]
  },
  // ...
};

terser 启动多线程

  optimization: {
    minimizer: [
      new CssMinimizerWebpackPlugin(), // css压缩
      // js压缩
      new TerserPlugin({
        parallel: true, //开启并行压缩，可以加快构建速度
      }),
    ],

devtool

开发环境中 inline-source-map 修改为 eval-cheap-module-source-map，map文件使用内联方式构建速度更快

devtool: 'eval-cheap-module-source-map'

减少loader和plugin的使用数量

启动这些也需要时间

尽量减少loader，比如使用Asset modules（Webpack5新特性）替换url-loader、file-loader、raw-loader

一些loader、plugin的升级