webpack性能优化

性能分析

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

插件功能

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

插件使用：包裹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');

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