欢迎来到科站长！

HTML/XhtmlCSSJavaScriptHTML5Dreamweaver教程Frontpage教程心得技巧JavaScriptAJAX相关ASP.NETPHP编程正则表达式ThinkPHPASP编程JSP编程编程10000问CSS/HTMLMySQLMariaDBOracleMongoDBRedisMsSqlmssql2008PostgreSQLSQLite

DedeCMSPHPCMS帝国CMSWordPressDiscuzeyouCMSPbootCMS其它CMS组装电脑教程电视盒子平板电脑鼠标键盘光存储显示器显卡笔记本主板内存网站优化工具资源建站经验微信营销网站策划网络赚钱网络创业站长故事alexa域名office激活

WindowsLinuxNginxApacheIISCentOSUbuntuDebian图标素材按钮素材字体素材

JavaScript

当前位置： 主页 > 网络编程 > JavaScript

Webpack打包速度优化方案汇总

时间：2025-07-21 10:21:22|栏目：JavaScript|点击： 次

一、基础配置优化

1.1 区分开发与生产环境

1
2
3
4
5
6
7
8
9
10
// webpack.config.js
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
   
  return {
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
    // 其他配置...
  };
};

优化点：

  • 开发环境使用更快的 sourcemap 生成方式
  • 生产环境启用完整优化但保留 sourcemap

1.2 减少解析范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx'] // 减少扩展名尝试
  }
};

二、Loader 优化策略

2.1 限制 loader 应用范围

1
2
3
4
5
6
{
  test: /\.js$/,
  exclude: /node_modules/,
  include: path.resolve(__dirname, 'src'),
  use: ['babel-loader?cacheDirectory']
}

2.2 启用 loader 缓存

1
2
3
4
5
6
7
8
use: [
  {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true // 默认缓存目录 node_modules/.cache/babel-loader
    }
  }
]

2.3 减少 loader 数量

1
2
3
4
5
6
7
8
9
10
11
12
13
// 避免不必要的 loader 调用
{
  test: /\.(jpe?g|png|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192 // 小于8KB转为base64
      }
    }
    // 移除不必要的 image-webpack-loader 开发环境
  ]
}

三、插件优化方案

3.1 选择性使用插件

1
2
3
4
const plugins = [
  new webpack.DefinePlugin({/*...*/}),
  isProduction && new MiniCssExtractPlugin()
].filter(Boolean);

3.2 禁用开发无用插件

1
2
3
4
plugins: [
  !isDevelopment && new CompressionPlugin(),
  !isDevelopment && new BundleAnalyzerPlugin()
].filter(Boolean)

3.3 使用 HardSourceWebpackPlugin

1
2
3
4
5
6
7
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 
module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

效果：二次构建速度提升60%-80%

四、模块解析优化

4.1 缩小模块搜索范围

1
2
3
4
5
6
7
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    react: path.resolve(__dirname, './node_modules/react')
  },
  symlinks: false // 防止npm link导致的重复解析
}

4.2 使用 module.noParse

1
2
3
module: {
  noParse: /jquery|lodash/ // 忽略未模块化的库
}

五、多进程并行处理

5.1 thread-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 2,
              workerParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
};

5.2 parallel-webpack

1
2
// 安装后直接运行
parallel-webpack --config=webpack.config.js

5.3 TerserPlugin 多进程

1
2
3
4
5
6
7
optimization: {
  minimizer: [
    new TerserPlugin({
      parallel: require('os').cpus().length - 1
    })
  ]
}

六、开发环境特化优化

6.1 禁用生产环境优化

1
2
3
4
5
6
optimization: {
  removeAvailableModules: false,
  removeEmptyChunks: false,
  splitChunks: false,
  minimize: false
}

6.2 使用 cache-loader

1
2
3
4
5
6
7
8
{
  test: /\.(js|jsx)$/,
  use: [
    'cache-loader',
    'babel-loader'
  ],
  include: path.resolve('src')
}

6.3 增量编译

1
2
3
4
watchOptions: {
  aggregateTimeout: 500, // 防抖延迟
  ignored: /node_modules/ // 忽略目录
}

七、DLL 预编译技术

7.1 创建 DLL 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.dll.config.js
module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll', '[name]-manifest.json')
    })
  ]
};

7.2 主配置引用 DLL

1
2
3
4
5
6
// webpack.config.js
plugins: [
  new webpack.DllReferencePlugin({
    manifest: require('./dll/vendor-manifest.json')
  })
]

八、高级优化技巧

8.1 使用 SWC 替代 Babel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true
            }
          }
        }
      }
    }
  ]
}

速度对比：SWC 比 Babel 快 20 倍以上

8.2 使用 esbuild-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'esbuild-loader',
        options: {
          target: 'es2015'
        }
      }
    ]
  },
  optimization: {
    minimizer: [
      new ESBuildMinifyPlugin({
        target: 'es2015'
      })
    ]
  }
};

8.3 模块联邦共享

1
2
3
4
5
6
7
8
// 共享依赖避免重复打包
new ModuleFederationPlugin({
  name: 'app1',
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
})

九、构建分析工具

9.1 速度分析

1
2
3
4
5
6
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
 
module.exports = smp.wrap({
  // 原webpack配置
});

9.2 构建耗时分析

1
2
3
4
5
6
7
8
9
10
11
12
13
class BuildTimePlugin {
  apply(compiler) {
    let startTime;
     
    compiler.hooks.beforeRun.tap('BuildTime', () => {
      startTime = Date.now();
    });
     
    compiler.hooks.done.tap('BuildTime', stats => {
      console.log(`构建耗时: ${(Date.now() - startTime) / 1000}s`);
    });
  }
}

十、综合优化配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const path = require('path');
const os = require('os');
const webpack = require('webpack');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: os.cpus().length - 1
            }
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin(),
    new webpack.ProgressPlugin(),
    process.env.ANALYZE && new BundleAnalyzerPlugin()
  ].filter(Boolean),
  resolve: {
    alias: {
      '@': path.resolve('src')
    },
    extensions: ['.js', '.json']
  },
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
    minimize: false
  },
  stats: {
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }
};

关键优化指标对比

优化手段构建时间减少幅度适用场景
HardSourceWebpackPlugin60%-80%开发环境
thread-loader30%-50%大型项目
DLL 预编译40%-60%稳定第三方库
SWC/esbuild50%-70%全场景
缓存配置70%-90%增量构建

最佳实践建议

  • 分层优化：

    • 开发环境：侧重构建速度（缓存、不压缩）
    • 生产环境：侧重输出质量（Tree Shaking、压缩）

  • 渐进式实施：

1
2
3
4
1. 添加基础缓存（HardSourceWebpackPlugin）
2. 引入多进程（thread-loader）
3. 分析优化重点（SpeedMeasurePlugin）
4. 实施高级优化（DLL/SWC）

持续监控：

  • 记录每次构建时间
  • 设置性能预算
1
2
3
4
5
performance: {
  hints: 'warning',
  maxAssetSize: 500 * 1024,
  maxEntrypointSize: 500 * 1024
}

通过综合应用这些优化策略，可以将 Webpack 构建速度提升 3-10 倍，显著改善开发体验。建议根据项目实际情况选择性组合使用，并定期使用分析工具评估优化效果。


上一篇：Vuex Actions多参数传递的解决方案

栏    目：JavaScript

下一篇：暂无

本文标题：Webpack打包速度优化方案汇总

本文地址：https://www.fushidao.cc/wangluobiancheng/23729.html

更多JavaScript

您可能感兴趣的文章

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：257218569 | 邮箱：257218569@qq.com

Copyright © 2018-2025 科站长 版权所有冀ICP备14023439号