解决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')
]
output: {
path: path.resolve(containerPath,'dist/'),
filename: '[name].js'
}
在webpack配置文件的根上加上这些内容，在html入口处需要引入common.js
//确认一下是不是第一回打包后这个文件已经有了 <script src="dist/common.js"></script>
这种方式在webpack -watch后第一遍依旧很慢（因为要打common） 之后修改默认打包是就不会再打common了。而且还有一个优点就是不用再引React，jquery一堆文件了，只引common一个文件就ok。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了ES6知识点整理之函数对象参数默认值及其解构应用,结合实例形式分析了ES6函数对象参数相关使用技巧,需要的朋友可以参考下2019-04-04
在开发项目的过程中，我们经常会需要关于javascript数组的一些算法，比方说数组去重、数组求交集、数组扰乱等等。今天就把个人的汇总整理的算法分享给大家。2016-02-02
这篇文章主要介绍了使用javascript如何生成随机颜色,需要的朋友可以参考下2014-05-05
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的API或工具包，接下来跟着小编学习js中判断json的方法吧2015-08-08
本节主要介绍了ie8下面处理 new Date()的问题,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了JavaScript简单实现关键字文本搜索高亮显示功能,涉及javascript基于事件响应的页面元素遍历、分割、替换等相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JavaScript事件冒泡与事件捕获,结合实例形式分析了事件冒泡、阻止冒泡以及事件捕获的相关原理、操作技巧与注意事项,需要的朋友可以参考下2018-08-08
微信小程序分享功能onShareAppMessage(options)用法分析
这篇文章主要介绍了微信小程序分享功能onShareAppMessage(options)用法,结合具体实例形式分析了微信小程序分享功能onShareAppMessage(options)具体使用技巧与相关操作注意事项,需要的朋友可以参考下2019-04-04
最近使用uniapp做了个APP,由于客户是巴西的,所以使用中文已经满足不了客户需求了,本打算直接使用英文开发算了,老板非要做成可以中英文切换的,没办法只能开干,需要的朋友可以参考下2023-11-11
js中的继承与其说是对象的继承,但更像是让函数的功能和用法的复用,下面这篇文章主要给大家介绍了关于js中常见的6种继承方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
最新评论