目錄

前言

使用vue-cli建立專案，使用webpack打包。其中，有一個webpack優化webpack.optimize.CommonsChunkPlugin，它會將node_modules中的必需模組提取到vendor檔案中，專案開發中，增加第三方模組，比如element-ui、vue-echarts等，vendor的包都會增大。這個時候，就需要考慮減輕vendor包的大小，增加構建速度。我們可以使用webpack的外部擴充套件(externals)功能。

externals定義

externals配置選項，將指定的內容排除在構建的vendor中，但是，指定的內容需要出現在使用者環境中。
以上是我的理解。

官方解釋是：
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment.
externals配置選項提供了「從輸出的 bundle 中排除依賴」的方法。相反，所建立的 bundle 依賴於那些存在於使用者環境(consumer's environment)中的依賴。

用法

防止將某些 import的包打包到bundle中，而是在執行時(runtime)再去外部獲取這些擴充套件依賴(external dependencies)
可以通過多種編寫方式實現：string,array,object,function,regex。這裡，我只說一些簡單的內容，詳細講解，我覺得這個解釋不錯。

module.exports = {
  // ...
  externals: [ // array形式
    { // object形式
      './a', 'a', // string形式
      jquery: 'jQuery', 
      vue: 'Vue'，
    },
    function(context, request, callback) { // function形式
      if(request.substr(0, 1) !== '.') callback(null, 'commonjs ' + request)
      callback()
    },
    /^[a-z\-0-9]+$/, // regex形式
  ]
}
 

除了function形式，必須在array形式中，其他形式，都可以提升，直接作為externals屬性使用。比如string形式：

externals: {
    './a': 'a',
    jquery: 'jQuery'
}

string

屬性名稱是jquery，表示應該排除import $ from 'jquery'中的 jquery模組。為了替換這個模組，jquery的值將被用來檢索一個全域性的$變數。換句話說，當設定為一個字串時，它將被視為全域性的，我們需要在全域性變數中，找到$，才能使程式正確執行。

array

陣列內的每一個元素都可以是多種形式，包括object, regex, function, string四種：

object

object形式，可以直接作為externals的值，這種形式是絕大部分專案中的配置形式。它裡面一定是鍵值對（key: value)的形式。

function

function的使用，只能在array形式中作為一個元素傳入。

regex

正則匹配的形式，通過傳入正則表示式來實現匹配。這個可以放在陣列形式中，也可以直接作為externals的屬性。

實際案例

案例地址
以上說了如何配置的問題，在工作中，具體會是一個怎樣的表現呢。我挑選了一個常用的配置object形式，做了一些操作，對比下。

• 第一種情況，完全不使用externals配置。
  第一種情況的截圖
  
  

• 第二種情況，通過npm run build --report得出的報告，將一些不常修改的大包作為外部擴充套件。
  這需要做兩步操作：第一步修改webpack.base.conf.js檔案，第二步，將外部擴充套件的內容通過其他方式載入到window環境，這裡，我們通過<script>標籤,並使用cdn來完成。
  配置的檔案：webpack.base.conf.js

externals: {
  vue : 'Vue',
  "echarts": 'echarts',
  "element-ui": 'ELEMENT'
}

在模板檔案index.html中，新增<script>標籤

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>

第二種情況的截圖：

這兩種情況，我們主要從打包的時間，打包之後包的大小，實際瀏覽器中載入時長三個方面來做比較。

打包時間

打包時間，由原來的38s縮短至18s，大大減少了打包時間。

打包之後包的大小

主要看vendor包的大小，由原來的1.45M縮小至41.3k，縮小的內容，我們使用cdn，使其存在於外部環境。
由於externals屬性，是將依賴排除，本該將node_modules中依賴包打入到vendor bundle中，變成外部擴充套件。

瀏覽器載入

使用externals屬性，外部擴充套件，會增加請求數，由原來的6個請求變成了9個請求。由於是使用CDN，非首次請求，會使用快取中的資料，所以載入時間不受太大影響。
截圖所示時間不同，這個和多方面因素有關。你在相同的環境，每次重新整理得到的結果都不一樣。

需要注意

如果發現問題，可以通過以下幾個方向查詢：

1. script的先後順序
2. cdn的地址路徑是否正確
3. 瀏覽器的window屬性值，是否和你的externals屬性的value相對應。可以在console控制檯輸出看看。
4. externals的打包支援什麼型別的，就和output.libraryTarget和output.library 這兩個屬性有關係了。唐霜講的清楚點，可以看看

參考