1、webpack3打包第三方模塊配置
// 打包第三方插件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].js',
// 可以是已經存在的chunk（一般指入口文件）對應的name，那麼就會把公共模塊代碼合併到這個chunk上；否則，會創建名字為name的commons chunk進行合併
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
// chunks： 指定source chunk，即指定從哪些chunk當中去找公共模塊，省略該選項的時候，默認就是entry chunks
}),上述配置將會將node_modules中被main.js入口文件（以及子文件）引用的js文件打包合併。當引用的第三方模塊越多或者比較大時，打包成的vendor.js文件也會比較大，會嚴重降低打包速度和頁面加載速度。在vue項目中webpack將會把vue.js、vue-router.js、vuex.js、element-ui.js等文件打包到vendor.js中，但是這些文件都是可以通過CDN引入的，特別是element-ui.js文件比較大，使用CDN引入會大大減小vendor.js文件大小。下面我們試試通過CDN引入第三方模塊能不能加快打包速度和降低vendor.js大小。
1、在index.html模板中通過CDN引入第三方模塊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</body>
</html>
2、在webpack.base.conf.js中加入externals外部擴展
這裏解釋一下externals 配置選項的作用：
- 官網解釋：
webpack 中的 externals 配置提供了不從 bundle 中引用依賴的方式。解決的是，所創建的 bundle 依賴於那些存在於用户環境(consumer environment)中的依賴。
怎麼理解呢，意思是如果需要引用一個庫，但是又不想讓webpack打包（減少打包的時間），並且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進行使用（一般都以import方式引用使用），那就可以通過配置externals。
這樣做的目的就是將不怎麼需要更新的第三方庫脱離webpack打包，不被打入bundle中，從而減少打包時間，但又不影響運用第三方庫的方式，例如import方式等。
比如：上圖我們配置了'element-ui': 'ELEMENT'，其中'ELEMENT'是<script src="https://unpkg.com/element-ui/lib/index.js"></script>導入的模塊名，'element-ui': 'ELEMENT'就是進行了一個映射，模塊名變成了'element-ui'，在main.js中我們還是可以通過import ElementUI from 'element-ui'引入。externals配置就是讓我們還是能夠import等方式引入模塊，雖然模塊是通過CDN引入
3、打包對比
引入node_modules中模塊：
CDN引入模塊：
可以看到vendor.js文件大大減小，打包速度也快了很多
參考：
https://www.jianshu.com/p/283b17d17b3c
