webpack优化总结

1. 分包

将不需要变动的第三方包分离出去, 主要方法有：

(1). externals
(2). DllPlugin
(3). expose-loader
(4). ProviderPlugin

2. 拆包

将大包拆成小包，将公共模块抽离，将公共组件与业务代码分离，主要方法有：

1. CommonChunkPlugin

2. SplitChunksPlugin (webpack4)

3. 按需加载(Code Spliting)

将无需首屏加载的模块分离出去，采用按需加载的方式，当点击按钮的时候才去加载指定模块，有助于提升性能

使用 require.ensure 或 dynamic import
4. 开启并行加速

1. 使用HappyPack对多种loader进行并行加速

2. 使用并行的uglify插件对uglify进行并行加速，常用插件有 webpack-parallel-uglify-plugin(首选) 或 webpack-uglify-parallel 或 官方的 uglifyjs-webpack-plugin

3. 开启缓存

webpack的loader和plugin都有自己的缓存，开启缓存将有助于提高速度

(1). 开启babel-laoder的cacheDirectory，使用transform-runtime等
// webpack.config.js
use: [{
loader: ‘babel-loader’,
options: {
cacheDirectory: true
}
}]
// .bablerc
{
“presets”: [
“env”,
“react”
],
“plugins”: [“transform-runtime”]
}
(2). 开启happyPack的cacheDirectory