打包速度优化

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的升级

你可能感兴趣的:(打包构建,前端)