webpack中一些你不曾注意到的小优化点

最近在工作之余呢&＃xff0c;看了一些关于前端工程化的文章&＃xff0c;其中有些我觉得比较有用的用于优化webpack构建速度的点&＃xff0c;特地记录一下。

当我听到关于webpack优化这个词&＃xff0c;第一时间想到的肯定都是用DLLPlugin、uglifyPlugin等插件优化&＃xff0c;但是其实有时候一些小小的改动也能让我们的项目得到很大的优化。

• 优化loader的搜索范围
  这个选项我们可以通过配置对应loader的include以及exclude来减少loader的文件处理数量&＃xff0c;从而减构建的时间
  
• 模块查找的设置
  我们的工程化项目里都会用到node_modules里面的模块&＃xff0c;通常我们的node_modules目录都在根目录下&＃xff0c;这个时候我们可以设置resolve.modules配置项&＃xff0c;来减少对第三方模块的检索时间。因为这样设置的话&＃xff0c;当遇到第三方模块的使用时会直接从根目录下的node_modules文件夹查找&＃xff0c;而不是逐级向上查找&＃xff0c;从而减少文件遍历时间。
• 文件后缀的设置
  当我们引用别的模块的时候&＃xff0c;很多时候我们都不会增加后缀&＃xff08;例如&＃xff1a;import xx from ‘index’ 而不是index.tsx&＃xff09;&＃xff0c;这个时候webpack会根据我们的resolve.extensions选项来依次添加后缀进行检索&＃xff0c;如果我们的后缀顺序设置合理的话也会减少文件检索的时间。
  
• 公用包抽离
  我们的项目中会有很多的第三方包&＃xff0c;如果构建时把这些也打包进去的话就会增加不必要的时间和打包体积。我们可以通过设置externals选项使webpack构建时将一些包排除在外。但是一定要记得在HTML模板文件中通过script将对应的包加载&＃xff0c;最好是可以通过cdn访问&＃xff0c;可以增加一些页面加载速度。
  
  
  以上就是我对于webpack小优化点的一些总结&＃xff0c;这些修改点都不大&＃xff0c;但是可以提高你的构建速度&＃xff0c;我觉得还是很有必要对项目进行一波优化的&＃xff0c;最后送上前几个优化点整合在一起的样子。
  
  如果对各位有帮助的话&＃xff0c;希望可以点赞支持一下&＃xff0c;谢谢。