解決webpack打包速度慢的解決辦法匯總
剛開(kāi)始用webpack，談一談解決webpack打包慢的問(wèn)題的方法
技巧1
webpack在打包的時(shí)候第一次總是會(huì)做很長(zhǎng)的準(zhǔn)備工作，包括加載插件之類(lèi)的。在剛接觸webpack的時(shí)候總是webpack一下-測(cè)一下-改一下-再webpack一下，這種方式最后讓很多人崩潰了覺(jué)得webpack一點(diǎn)都不好用。其實(shí)這是錯(cuò)誤的使用方式。
正確的方式應(yīng)直接執(zhí)行webpack --watch 這樣webpack會(huì)自動(dòng)編譯，第一回的時(shí)候確實(shí)很慢，但之后的自動(dòng)編譯就要快了好多，打包時(shí)間相差幾倍。
技巧2
webpack配合的React，jQuery一些共有的庫(kù)去使用，雖然沒(méi)寫(xiě)幾行代碼卻發(fā)現(xiàn)我靠打個(gè)文件居然好幾M了。能不能不讓這些共有庫(kù)打入我們的文件呢？
externals:
{
'antd':true,
'react': 'React',
'react-dom': 'ReactDOM'
}
在webpack配置文件的根上加上這些內(nèi)容。告訴webpack在require(“react”)的時(shí)候不要去加載模塊，直接去讀（這里還不是很明白，有的說(shuō)“：”后面是window.React，寫(xiě)了后面可以直接使用無(wú)需require，待確定后再補(bǔ)充，一般寫(xiě)true就可以了），當(dāng)然這種方式要在html入口手動(dòng)引入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>
在項(xiàng)目中正常使用require(“react”)試試，不會(huì)被打進(jìn)去了，文件變?yōu)榱藥譳，突然感覺(jué)webpack這東西還是能用的。
技巧3
大部分情況下通過(guò)技巧2已經(jīng)可以搞定大部分問(wèn)題了，但是在用MaterialUI的時(shí)候，點(diǎn)擊事件總是報(bào)一個(gè)錯(cuò)誤，大概意思是重復(fù)的引入了react什么的。如果出現(xiàn)這個(gè)問(wèn)題，那么請(qǐng)使用技巧3。將那些共有的模塊打進(jìn)另外一個(gè)文件中，然后使用CommonsChunkPlugin插件，在webpack –watch非第一編打包的時(shí)候就不會(huì)重復(fù)的打另外一個(gè)文件了。
entry: {
//這是我自己文件的入口，換成自己的
main: './apps/main.jsx',
//這個(gè)是把外面的東西打包成common.js
'common':['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js']
},
plugins: [
//把common.js變?yōu)楣灿械?，除第一遍打包后就不?huì)再打包了
new webpack.optimize.CommonsChunkPlugin('common', 'common.js')
]
output: {
path: path.resolve(containerPath,'dist/'),
filename: '[name].js'
}
在webpack配置文件的根上加上這些內(nèi)容，在html入口處需要引入common.js
//確認(rèn)一下是不是第一回打包后這個(gè)文件已經(jīng)有了 <script src="dist/common.js"></script>
這種方式在webpack -watch后第一遍依舊很慢（因?yàn)橐騝ommon） 之后修改默認(rèn)打包是就不會(huì)再打common了。而且還有一個(gè)優(yōu)點(diǎn)就是不用再引React，jquery一堆文件了，只引common一個(gè)文件就ok。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實(shí)例形式分析了ES6函數(shù)對(duì)象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-04-04
在開(kāi)發(fā)項(xiàng)目的過(guò)程中，我們經(jīng)常會(huì)需要關(guān)于javascript數(shù)組的一些算法，比方說(shuō)數(shù)組去重、數(shù)組求交集、數(shù)組擾亂等等。今天就把個(gè)人的匯總整理的算法分享給大家。2016-02-02
這篇文章主要介紹了使用javascript如何生成隨機(jī)顏色,需要的朋友可以參考下2014-05-05
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式，采用完全獨(dú)立于語(yǔ)言的文本格式，是理想的數(shù)據(jù)交換格式。同時(shí)，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的API或工具包，接下來(lái)跟著小編學(xué)習(xí)js中判斷json的方法吧2015-08-08
本節(jié)主要介紹了ie8下面處理 new Date()的問(wèn)題,需要的朋友可以參考下2014-07-07
JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應(yīng)的頁(yè)面元素遍歷、分割、替換等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JavaScript事件冒泡與事件捕獲,結(jié)合實(shí)例形式分析了事件冒泡、阻止冒泡以及事件捕獲的相關(guān)原理、操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-08-08
微信小程序分享功能onShareAppMessage(options)用法分析
這篇文章主要介紹了微信小程序分享功能onShareAppMessage(options)用法,結(jié)合具體實(shí)例形式分析了微信小程序分享功能onShareAppMessage(options)具體使用技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-04-04
最近使用uniapp做了個(gè)APP,由于客戶(hù)是巴西的,所以使用中文已經(jīng)滿(mǎn)足不了客戶(hù)需求了,本打算直接使用英文開(kāi)發(fā)算了,老板非要做成可以中英文切換的,沒(méi)辦法只能開(kāi)干,需要的朋友可以參考下2023-11-11
js中的繼承與其說(shuō)是對(duì)象的繼承,但更像是讓函數(shù)的功能和用法的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于js中常見(jiàn)的6種繼承方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01