解决webpack打包速度慢的解决办法汇总
刚开始⽤webpack，谈⼀谈解决webpack打包慢的问题的⽅法
技巧1
webpack在打包的时候第⼀次总是会做很长的准备⼯作，包括加载插件之类的。在刚接触webpack的时候总是webpack⼀下-测⼀下-改⼀下-再webpack⼀下，这种⽅式最后让很多⼈崩溃了觉得webpack⼀点都不好⽤。其实这是错误的使⽤⽅式。
正确的⽅式应直接执⾏webpack --watch 这样webpack会⾃动编译，第⼀回的时候确实很慢，但之后的⾃动编译就要快了好多，打包时间相差⼏倍。
技巧2
webpack配合的React，jQuery⼀些共有的库去使⽤，虽然没写⼏⾏代码却发现我靠打个⽂件居然好⼏M了。能不能不让这些共有库打⼊我们的⽂件呢？
externals:
{
'antd':true,
'react': 'React',
'react-dom': 'ReactDOM'
}
在webpack配置⽂件的根上加上这些内容。告诉webpack在require(“react”)的时候不要去加载模块，直接去读（这⾥还不是很明⽩，有的说“：”后⾯是window.React，写了后⾯可以直接使⽤⽆需require，待确定后再补充，⼀般写true就可以了），当然这种⽅式要在html⼊⼝⼿动引⼊js⽂件：
<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="node_modules/antd/dist/antd.min.js"></script>
在项⽬中正常使⽤require(“react”)试试，不会被打进去了，⽂件变为了⼏k，突然感觉webpack这东西还是能⽤的。
技巧3
⼤部分情况下通过技巧2已经可以搞定⼤部分问题了，但是在⽤MaterialUI的时候，点击事件总是报⼀个错误，⼤概意思是重复的引⼊了react什么的。如果出现这个问题，那么请使⽤技巧3。将那些共有的模块打进另外⼀个⽂件中，然后使⽤CommonsChunkPlugin插件，在webpack –watch⾮第⼀编打包的时候就不会重复的打另外⼀个⽂件了。
entry: {
//这是我⾃⼰⽂件的⼊⼝，换成⾃⼰的
main: './apps/main.jsx',
//这个是把外⾯的东西打包成common.js
'common':['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js']
},
plugins: [
//把common.js变为共有的，除第⼀遍打包后就不会再打包了
new webpack.optimize.CommonsChunkPlugin('common', 'common.js')
jquery自动轮播图代码
]
output: {
path: solve(containerPath,'dist/'),
filename: '[name].js'
}
在webpack配置⽂件的根上加上这些内容，在html⼊⼝处需要引⼊common.js
//确认⼀下是不是第⼀回打包后这个⽂件已经有了
<script src="dist/common.js"></script>
这种⽅式在webpack -watch后第⼀遍依旧很慢（因为要打common）之后修改默认打包是就不会再打common了。⽽且还有⼀个优点就是不⽤再引React，jquery⼀堆⽂件了，只引common⼀个⽂件就ok。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。