优化构建速度
1. 缩小文件的搜索范围
resolve字段告诉webpack怎么去搜索文件module.noParse字段告诉Webpack不必解析哪些文件,可以用来排除对非模块化库文件的解析- 配置loader时,通过test、exclude、include缩小搜索范围
2. 使用DllPlugin减少基础模块编译次数
DllPlugin动态链接库插件,其原理是把网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取。**为什么会提升构建速度呢?**原因在于dll中大多包含的是常用的第三方模块,如react、react-dom,所以只要这些模块版本不升级,就只需被编译一次。我认为这样做和配置resolve.alias和module.noParse的效果有异曲同工的效果。
3. 使用HappyPack开启多进程Loader转换
HappyPack可以将任务分解给多个子进程,最后将结果发给主进程。JS是单线程模型,只能通过这种多进程的方式提高性能。
4. 使用ParallelUglifyPlugin开启多进程压缩JS文件
ParallelUglifyPlugin可以开启多个子进程,每个子进程使用UglifyJS压缩代码,可以并行执行,能显著缩短压缩时间。
优化开发体验
1. 使用自动刷新
a. Webpack监听文件
b. DevServer刷新浏览器
2. 开启模块热替换HMR
优化输出质量-压缩文件体积
- 减小生产环境代码体积
- 压缩代码-JS、ES、CSS
- 使用Tree Shaking剔除JS死代码
优化输出质量--加速网络请求
- 使用CDN加速静态资源加载
- 多页面应用提取页面间公共代码,以利用缓存
- 分割代码以按需加载