webpack配置优化

79 阅读2分钟

优化构建速度

1. 缩小文件的搜索范围

  1. resolve字段告诉webpack怎么去搜索文件
  2. module.noParse字段告诉Webpack不必解析哪些文件,可以用来排除对非模块化库文件的解析
  3. 配置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

优化输出质量-压缩文件体积

  1. 减小生产环境代码体积
  2. 压缩代码-JS、ES、CSS
  3. 使用Tree Shaking剔除JS死代码

优化输出质量--加速网络请求

  1. 使用CDN加速静态资源加载
  2. 多页面应用提取页面间公共代码,以利用缓存
  3. 分割代码以按需加载