剛開始用webpack，談一談解決webpack打包慢的問題的方法

技巧1

webpack在打包的時(shí)候第一次總是會(huì)做很長的準(zhǔn)備工作，包括加載插件之類的。在剛接觸webpack的時(shí)候總是webpack一下-測一下-改一下-再webpack一下，這種方式最后讓很多人崩潰了覺得webpack一點(diǎn)都不好用。其實(shí)這是錯(cuò)誤的使用方式。

正確的方式應(yīng)直接執(zhí)行webpack --watch 這樣webpack會(huì)自動(dòng)編譯，第一回的時(shí)候確實(shí)很慢，但之后的自動(dòng)編譯就要快了好多，打包時(shí)間相差幾倍。

技巧2

webpack配合的React，jQuery一些共有的庫去使用，雖然沒寫幾行代碼卻發(fā)現(xiàn)我靠打個(gè)文件居然好幾M了。能不能不讓這些共有庫打入我們的文件呢？

externals: 
    {
      'antd':true,
      'react': 'React',
      'react-dom': 'ReactDOM'
    }

在webpack配置文件的根上加上這些內(nèi)容。告訴webpack在require(“react”)的時(shí)候不要去加載模塊，直接去讀（這里還不是很明白，有的說“：”后面是window.React，寫了后面可以直接使用無需require，待確定后再補(bǔ)充，一般寫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)榱藥譳，突然感覺webpack這東西還是能用的。

技巧3

大部分情況下通過技巧2已經(jīng)可以搞定大部分問題了，但是在用MaterialUI的時(shí)候，點(diǎn)擊事件總是報(bào)一個(gè)錯(cuò)誤，大概意思是重復(fù)的引入了react什么的。如果出現(xiàn)這個(gè)問題，那么請(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。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論