最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

創(chuàng)新互聯(lián)建站是專業(yè)的東川網(wǎng)站建設(shè)公司，東川接單;提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行東川網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

技巧1

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

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

技巧2

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

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

在webpack配置文件的根上加上這些內(nèi)容。告訴webpack在require(“react”)的時候不要去加載模塊，直接去讀（這里還不是很明白，有的說“：”后面是window.React，寫了后面可以直接使用無需require，待確定后再補充，一般寫true就可以了），當(dāng)然這種方式要在html入口手動引入js文件：

在項目中正常使用require(“react”)試試，不會被打進去了，文件變?yōu)榱藥譳，突然感覺webpack這東西還是能用的。

技巧3

大部分情況下通過技巧2已經(jīng)可以搞定大部分問題了，但是在用MaterialUI的時候，點擊事件總是報一個錯誤，大概意思是重復(fù)的引入了react什么的。如果出現(xiàn)這個問題，那么請使用技巧3。將那些共有的模塊打進另外一個文件中，然后使用CommonsChunkPlugin插件，在webpack –watch非第一編打包的時候就不會重復(fù)的打另外一個文件了。

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配置文件的根上加上這些內(nèi)容，在html入口處需要引入common.js

//確認一下是不是第一回打包后這個文件已經(jīng)有了

這種方式在webpack -watch后第一遍依舊很慢（因為要打common） 之后修改默認打包是就不會再打common了。而且還有一個優(yōu)點就是不用再引React，jquery一堆文件了，只引common一個文件就ok。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。