51讲 多进程、多实例构建

资源并行解析可选方案

使用HappyPack 解析资源

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

使用thread-loader解析资源（webpack4推荐使用这个）

52讲 多进程并行压缩代码

多进程、多实例：并行压缩

方法一： 使用parallel-uglify-plugin插件

方法二： 使用uglifyjs-webpack-plugin开启parallel参数

方法三： 使用terser-webpack-plugin开启parallel参数

53讲 进一步分包： 预编译资源模块

分包： 设置Externals

思路： 将react、react-dom基础包通过cdn引入，不打入bundle中

方法： 使用html-webpack-externals-plugin

缺点：一个基础库必须指定一个cdn，生成很多

预编译资源模块

思路：将react、react-dom、redux、react-redux基础包和业务基础包打包成一个文件 方法：使用DLLPlugin进行分包，DllReferencePlugin对manifest.json引用

54讲 充分利用缓存提升第二次构建速度

缓存

目的： 提升二次构建速度

缓存思路：

• babel-loader开启缓存
• terser-webpack-plugin开启缓存
• 使用cache-loader或者hard-source-webpack-pligin

55讲 缩小构建目标

减少文件搜索范围

56讲 使用Tree Shaking擦除无用的JavaScript和CSS

tree shaking 摇树优化

无用的css如何删除

在webpack中如何使用PurifyCSS

57讲 使用webpack进行图片压缩（体积大小优化）

Imagemin的优点分析

有很多定制选项
可以引入更多第三方优化插件，例如pngquant
可以处理多种图片格式

Imagemin的压缩原理

58讲 使用动态Polyfill服务（体积大小优化）

例子：

参考

程柳峰 《极客时间》 《玩转webpack》第五章51-58讲