前端性能优化篇之webpack如何提⾼的打包速度、如何减少打包体积、如何⽤来优化前端性能、如何提⾼构建速度？

最新推荐文章于 2025-05-22 16:48:13 发布

原创

最新推荐文章于 2025-05-22 16:48:13 发布 · 1.7k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #性能优化 #webpack

如何提⾼webpack的打包速度?

1. 使用最新版本的Webpack和相关插件：

确保你正在使用最新版本的Webpack和相关插件，因为它们通常会包含性能改进。

2. 合理配置Loader：

避免不必要的文件处理，只对需要的文件使用相应的Loader，并尽量精简Loader链。

首先，我们可以通过配置Loader的文件搜索范围来提高效率。比如，对于Babel Loader，我们希望它只作用在JS代码上，因此我们可以使用include和exclude属性来指定需要处理的文件夹和不需要处理的文件夹，避免不必要的文件处理。

module.exports = {
   
   
  module: {
   
   
    rules: [
      {
   
   
        // 只对js文件使用babel-loader
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在src文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

另外，为了加快打包时间，我们可以将Babel编译过的文件缓存起来，这样下次只需要编译更改过的代码文件即可。你可以通过设置cacheDirectory选项为true来实现这一点。

loader: 'babel-loader?cacheDirectory=true'

通过以上方式，我们可以优化Loader的配置，避免不必要的文件处理，只对需要的文件使用相应的Loader，并尽量精简Loader链，从而提高Webpack的打包效率。

3. 使用HappyPack或thread-loader：

这些工具可以将任务分发给多个子进程，以充分利用多核处理器的优势，加快构建速度。

当使用Webpack进行打包时，由于Node是单线程运行的，因此在执行Loader时可能会出现长时间编译任务导致等待的情况。为了充分利用系统资源加快打包效率，可以使用HappyPack工具将Loader的同步执行转换为并行执行。

首先，需要对Webpack配置进行调整，指定需要使用HappyPack的Loader，同时设置相应的ID以及线程数量。比如，对于Babel Loader的配置，可以这样进行设置：

module: {
   
   
  rules: [
    {
   
   
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // 使用HappyPack的loader
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
   
   
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]

通过这样的配置，HappyPack可以将任务分发给多个子进程，充分利用多核处理器的优势，从而加快构建速度，提高Webpack的打包效率。

4. 使用DllPlugin预编译依赖模块：

将第三方库单独打包，避免每次构建都重新编译这些模块。

当使用DllPlugin预编译依赖模块时，我们可以将第三方库单独打包，从而避免每次构建都重新编译这些模块。这种方式能大大减少打包类库的次数，只有在类库更新版本时才需要重新打包，并且还能实现将公共代码抽离成单独文件的优化方案。

首先，我们需要在一个单独的文件中配置DllPlugin，比如命名为webpack.dll.conf.js。在这个文件中，我们指定需要统一打包的类库，然后使用DllPlugin进行配置，示例代码如下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
   
   
  entry: {
   
   
    // 想统一打包的类库
    vendor: ['react']
  },
  output: {