webpack性能优化实践与技巧-优快云博客

本文详细探讨了webpack的性能优化策略，包括性能分析、构建速度提升和加载运行速度优化。重点介绍了使用高版本webpack、多进程并行构建、DLLPlugin、Tree Shaking、Scope Hoisting、图片压缩和预渲染等技术，旨在提高构建效率和应用加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

性能分析

1. 统计基本信息

使用webpack内置的stats

可以统计出构建时间、构建资源清单及资源大小等信息

使用方法：

1. cli

webpack --env production --json > stats.json

2. node API

webpack(config, (err, stats) => {
  console.log(stats);
});

2. 速度分析

使用speek-measure-webpack-plugin

插件功能

分析出整个构建时间和每个loader和plugin的构建时间
时间过长的标红，较长的标黄

插件使用：包裹webpack的配置

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

const webpackConfig = smp({
  // webpack配置
});

3. 体积分析

使用webpack-bundle-analyzer

以可视化形式展示打包依赖模块的体积。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

构建完成后会启动本地服务，serve 8888端口，浏览器中访问就能看到分析结果。

提升构建速度

使用高版本的webpack和nodejs

高版本的webpack和nodejs构建速度更快

webpack4优化原因：

v8带来的优化（for of 代替forEach，Map、Set代替Object、includes代替indexOf）
默认使用更快的md4 hash算法
webpack AST可以直接从loader传递给AST，减少解析时间
使用字符串方法代替正则

多进程多实例构建

资源并行解析可选方案

HappyPack
作者已经不维护，建议使用webpack官方提供的"thread-loader"
thread-loader

{
  test: /.js$/,
    user: [
      {
        loader: 'thread-loader',
        options: {
          workers: 3
        }
      },
      'babel-loader'
    ]
}

parallel-webpack

多进程多实例并行压缩

1. 方法一，使用parallel-uglify-plugin插件

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

modu