解決webpack打包速度慢的解決辦法匯總

更新時間：2017年07月06日 15:15:58 作者：蒼天的懶腰

本篇文章主要介紹了徹底解決webpack打包慢的解決辦法匯總，詳細的介紹了3種方法，有興趣的可以了解一下

剛開始用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配置文件的根上加上這些內(nèi)容。告訴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已經(jīng)可以搞定大部分問題了，但是在用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配置文件的根上加上這些內(nèi)容，在html入口處需要引入common.js

//確認一下是不是第一回打包后這個文件已經(jīng)有了
<script src="dist/common.js"></script>

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

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

您可能感興趣的文章:

ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構應用示例
這篇文章主要介紹了ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構應用,結合實例形式分析了ES6函數(shù)對象參數(shù)相關使用技巧,需要的朋友可以參考下
2019-04-04
JavaScript常用數(shù)組算法小結
在開發(fā)項目的過程中，我們經(jīng)常會需要關于javascript數(shù)組的一些算法，比方說數(shù)組去重、數(shù)組求交集、數(shù)組擾亂等等。今天就把個人的匯總整理的算法分享給大家。
2016-02-02
javascript生成隨機顏色示例代碼
這篇文章主要介紹了使用javascript如何生成隨機顏色,需要的朋友可以參考下
2014-05-05
javascript中判斷json的方法總結
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，采用完全獨立于語言的文本格式，是理想的數(shù)據(jù)交換格式。同時，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的API或工具包，接下來跟著小編學習js中判斷json的方法吧
2015-08-08
new Date()問題在ie8下面的處理方法
本節(jié)主要介紹了ie8下面處理 new Date()的問題,需要的朋友可以參考下
2014-07-07
JavaScript簡單實現(xiàn)關鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡單實現(xiàn)關鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應的頁面元素遍歷、分割、替換等相關操作技巧,需要的朋友可以參考下
2018-07-07
JavaScript事件冒泡與事件捕獲實例分析
這篇文章主要介紹了JavaScript事件冒泡與事件捕獲,結合實例形式分析了事件冒泡、阻止冒泡以及事件捕獲的相關原理、操作技巧與注意事項,需要的朋友可以參考下
2018-08-08
微信小程序分享功能onShareAppMessage(options)用法分析
這篇文章主要介紹了微信小程序分享功能onShareAppMessage(options)用法,結合具體實例形式分析了微信小程序分享功能onShareAppMessage(options)具體使用技巧與相關操作注意事項,需要的朋友可以參考下
2019-04-04
在uniapp中實現(xiàn)中英文切換的方法
最近使用uniapp做了個APP,由于客戶是巴西的,所以使用中文已經(jīng)滿足不了客戶需求了,本打算直接使用英文開發(fā)算了,老板非要做成可以中英文切換的,沒辦法只能開干,需要的朋友可以參考下
2023-11-11
js中常見的6種繼承方式總結
js中的繼承與其說是對象的繼承,但更像是讓函數(shù)的功能和用法的復用,下面這篇文章主要給大家介紹了關于js中常見的6種繼承方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-01-01