提高webpack的构建速度的几种方法概括 2021-05-08

提高webpack的构建速度的几种方法概括

通过externals配置来提取常用库

利用DllPlugin和DllReferencePlugin预编译资源模块,通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。

使用Happypack 实现多线程加速编译,要注意的第一点是，它对file-loader和url-loader支持不好，所以这两个loader就不需要换成happypack了，其他loader可以类似地换一下

使用Tree-shaking和Scope Hoisting来剔除多余代码

使用fast-sass-loader代替sass-loader

babel-loader开启缓存

babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率
可以加上cacheDirectory参数或使用 transform-runtime 插件试试

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • webpack相关
    1、什么是webpack webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模...
    没糖_cristalle阅读 2,767评论 0赞 0
  • webpack(个人笔记)
    webpack官网：https://webpack.js.org/webpack中文文档: https://www...
    kevision阅读 4,212评论 0赞 1
  • webpack 快速入门
    一、webpack 配置 1. 资源入口 Webpack 通过 context 和 entry 这两个配置项来共同...
    了凡和纤风阅读 4,596评论 0赞 7
  • webpack 知识概括
    基本使用 现在流行的框架 Vue ，react 都已经 webpack 基础配置都做好了，我们基本上不需要配置任何...
    阿畅_阅读 3,169评论 0赞 3
  • 关于webpack的面试题总结
    问题列表 webpack与grunt、gulp的不同？ 与webpack类似的工具还有哪些？谈谈你为什么最终选择（...
    七月鎏金阅读 3,836评论 0赞 16