五、进阶篇：webpack 构建速度和体积优化策略

# 五、进阶篇：webpack 构建速度和体积优化策略

# 1. 初级分析：使用 webpack 内置的 stats

# stats: 构建的统计信息

# package.json 中使用 stats

-w651

# Node.js 中使用

-w1287

# 2. 速度分析：使用 speed-measure-webpack-plugin

代码示例

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

const smp = new SpeedMeasurePlugin()

const webpackConfig - smp.wrap({
    plugins: [
        new MyPlugin(),
        new MyOtherPlugin()
    ]
})

1
2
3
4
5
6
7
8
9
10

可以看到每个 loader 和插件执行耗时 -w546

# 速度分析插件作用

# 分析整个打包总耗时

# 每个插件和 loader 的耗时情况

# 3. webpack-bundle-analyzer 分析体积

代码示例

const BundleAnalyzerPlugin = require('webapck-bundle-analyzer').BundleAnalyzerPlugin

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

1
2
3
4
5
6
7

构建完成后会在 8888 端口展示大小 -w669

# 可以分析哪些问题

# 依赖的第三方模块文件大小

# 业务里面的组件代码大小

# 4. 使用高版本的 webpack 和 Node

# 使用高版本的 webpack 和 Node.js

-w1236

# 使用 Webpack4: 优化原因

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

# 5.多进程多实例构建

# 多进程/多实例构建：资源并行解析可选方案

-w1046

# 多进程/多实例：使用 HappyPack 解析资源

原理：每次 webpack 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中

# 代码实例

exports.plugins = [
    new HappyPack({
        id: 'jsx',
        threads: 4,
        loaders: ['babel-loader']
    }),
    new HappyPack({
        id: 'styles',
        threads: 2,
        loaders: ['style-loader', 'css-loader', 'less-loader']
    })
]