在日常的項目開發中，我們會用到各種第三方庫來提高效率，但隨之帶來的問題就是打包后的vendor.js體積過大，導致加載時空白頁時間過長，給用戶的體驗太差。為此我們需要減少vendor.js的體積，從本質上來解決這種問題。
webpack的外部擴展(externals)可以有效的解決。
一、作用？
使用vue-cli創建項目，使用webpack打包。其中，有一個webpack優化webpack.optimize.CommonsChunkPlugin，它會將node_modules中的必需模塊提取到vendor文件中，項目開發中，增加第三方模塊，比如element-ui、vue-echarts等，vendor的包都會增大。這個時候，就需要考慮減輕vendor包的大小，增加構建速度。我們可以使用webpack的外部擴展(externals)功能。
externals 配置選項提供了「從輸出的 bundle 中排除依賴」的方法。相反，所創建的 bundle 依賴於那些存在於用戶環境(consumer's environment)中的依賴。防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。
webpack之externals官方參考文檔傳送門，請戳這里→ externals
簡單的理解就是：webpack提供這個 externals 選項的作用是“從打包的bundle文件中排除依賴”。換句話說就是讓在項目中通過import引入的依賴在打包的時候不會打包到bundle包中去，而是通過script的方式去訪問這些依賴。
二、怎么用？
下面就以Vue項目為例，介紹一下externals的使用。項目中引用了vue、vue-router、axios、element-ui、qs等第三方庫，那么我們的目標就是在 runtime 時通過 cdn 去獲取依賴，在打包時忽略他的打包，從輸出的 bundle 中排除依賴。
1、在/build/webpack.base.conf.js中，配置externals
// externals中的key是后面需要require的名字，value是第三方庫暴露出來的方法名
module.exports = { //...
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'Element', 'qs': 'Qs' } }
2、在/src/main.js和/src/router/index.js中，移除上面與之相關的import引入，改為require方式引入
// /src/main.js // 移除
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import axios from 'axios' import Qs from 'qs' Vue.use(ElementUI) // 添加
const Vue = require('vue') const ElementUI = require('element-ui') const axios = require('axios') const Qs = require('qs')
// /src/router/index.js // 移除
import Router from 'vue-router' Vue.use(Router) // 添加
const Router = require('vue-router')
3、在/index.html中，通過CDN引入相應的js文件和css文件(CDN地址：https://www.bootcdn.cn)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="stylesheet">
<title>配置webpack中externals來減少打包后vendor.js的體積</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.3.8/index.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
</body>
</html>
至此，我們所有的改造步驟都已完成。你可以運行你的項目去檢測，改造前后的差距主要有3點：
（1）打包時間：打包時間，由原來的38s縮短至18s，大大減少了打包時間。
（2）打包之后包的大小：主要看vendor包的大小，由原來的1.45M縮小至41.3k，縮小的內容，我們使用cdn，使其存在於外部環境。由於externals屬性，是將依賴排除，本該將node_modules中依賴包打入到vendor bundle中，變成外部擴展。
（3）瀏覽器加載：使用externals屬性，外部擴展，會增加請求數，由原來的6個請求變成了9個請求。由於是使用CDN，非首次請求，會使用緩存中的數據，所以加載時間不受太大影響。
需要注意，如果發現問題，可以通過以下幾個方向查找：
（1）script的先后順序
（2）cdn的地址路徑是否正確
（3）瀏覽器的window屬性值，是否和你的externals屬性的value相對應。可以在console控制台輸出看看。
（4）externals的打包支持什么類型的，就和output.libraryTarget和output.library 這兩個屬性有關系了。
這篇文章講解的比較清楚，可以看看：webpack externals詳解：https://www.tangshuang.net/3343.html