webpack的externals配置選項，將指定的內容排除在構建的vendor中，但是，指定的內容需要出現在用戶環境中。

前言

使用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/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script src="https://unpkg.com/echarts@4.1.0/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 這兩個屬性有關系了。唐霜講的清楚點，可以看看

參考

1. 外部擴展Externals
2. webpack externals詳解
3. 本案例地址