解决webpack打包速度慢的解决办法汇总 - 行业资讯 - 肥雀云

刚开始用webpack,谈一谈解决webpack打包慢的问题的方法

webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的。在刚接触webpack的时候总是webpack一下,测一下,改一下,再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用。其实这是错误的使用方式。
　　

正确的方式应直接执行webpack——看这样webpack会自动编译,第一回的时候确实很慢,但之后的自动编译就要快了好,多打包时间相差几倍。

webpack配合的反应,jQuery一些共有的库去使用,虽然没写几行代码却发现我靠打个文件居然好了几米。能不能不让这些共有库打入我们的文件呢?

　　　　　　外部环境: 　　｛　　“antd”:没错, 　　“反应”:“反应”, 　　“react-dom”:“ReactDOM” 　　} 　　　　

在webpack配置文件的根上加上这些内容。告诉webpack在要求(“反应”)的时候不要去加载模块,直接去读(这里还不是很明白,有的说“:”后面是window.React,写了后面可以直接使用无需要求,待确定后再补充,一般写正确就可以了),当然这种方式要在html入口手动引入js文件:

　　　　　　& lt;脚本src=" https://www.yisu.com/zixun/node_modules/react/dist/react-with-addons.js "祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/node_modules/react-dom/dist/react-dom.min.js "祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/node_modules/antd/dist/antd.min.js "祝辞& lt;/script> 　　　　

在项目中正常使用要求(“反应”)试试,不会被打进去了,文件变为了几k,突然感觉webpack这东西还是能用的。

大部分情况下通过技巧2已经可以搞定大部分问题了,但是在用MaterialUI的时候,点击事件总是报一个错误,大概意思是重复的引入了反应什么的。如果出现这个问题,那么请使用技巧3。将那些共有的模块打进另外一个文件中,然后使用CommonsChunkPlugin插件,在webpack看非第一编打包的时候就不会重复的打另外一个文件了。

　　　　　　条目:{//这是我自己文件的入口,换成自己的　　主:“。/应用程序/main.jsx ',//这个是把外面的东西打包成common.js 　　“共同”:[’。/node_modules/反应/dist/react-with-addons.min.js ', '。/node_modules/react-dom/dist/react-dom.min.js ') 　　　　}, 　　插件:[//把common.js变为共有的,除第一遍打包后就不会再打包了　　新的webpack.optimize。CommonsChunkPlugin(“普通”、“common.js”) 　　］　　输出:{ 　　路径:path.resolve (containerPath ' dist/'), 　　文件名:“[名字]. js” 　　} 　　之前　　　　

在webpack配置文件的根上加上这些内容,在html入口处需要引入common.js

　　　　//确认一下是不是第一回打包后这个文件已经有了　　& lt;脚本src=" https://www.yisu.com/zixun/dist/common.js "祝辞& lt;/script> 　　　　

这种方式在webpack看后第一遍依旧很慢(因为要打常见)之后修改默认打包是就不会再打了。而且还有一个优点就是不用再引反应,jquery一堆文件了,只引常见一个文件就好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。