溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
剛開始用webpack，談一談解決webpack打包慢的問題的方法
技巧1
webpack在打包的時候第一次總是會做很長的準備工作，包括加載插件之類的。在剛接觸webpack的時候總是webpack一下-測一下-改一下-再webpack一下，這種方式最后讓很多人崩潰了覺得webpack一點都不好用。其實這是錯誤的使用方式。
正確的方式應直接執(zhí)行webpack --watch 這樣webpack會自動編譯，第一回的時候確實很慢，但之后的自動編譯就要快了好多，打包時間相差幾倍。
技巧2
webpack配合的React，jQuery一些共有的庫去使用，雖然沒寫幾行代碼卻發(fā)現(xiàn)我靠打個文件居然好幾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”)試試，不會被打進去了，文件變?yōu)榱藥譳，突然感覺webpack這東西還是能用的。
技巧3
大部分情況下通過技巧2已經可以搞定大部分問題了，但是在用MaterialUI的時候，點擊事件總是報一個錯誤，大概意思是重復的引入了react什么的。如果出現(xiàn)這個問題，那么請使用技巧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變?yōu)楣灿械模谝槐榇虬缶筒粫俅虬? 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了。而且還有一個優(yōu)點就是不用再引React，jquery一堆文件了，只引common一個文件就ok。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
