externals和DllPlugin都是为了分离模块诞生，通过他们可以将一些第三方模块抽离出来，打包的时候不需将某些三方库一起打包如vue、vue-router
这样提高了编译速度，减少了包的大小 利于浏览器的缓存机制，不用每次都重新加载这些库js。
性能优化
我们先来看一个例子
//webpac.base.config.js
let path = require('path')
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
resolve:{
alias:{
'vue':'vue/dist/vue.esm'
}
}
}
index.js引入Vue和Router
import Vue from 'vue';
import Router from 'vue-router'
此时打包100+kb
像vue、vue-router这种第三方库，一般是不需要改变的，我们可以将其抽离出来，减小包的体积，提升编译速度，加载更快
方案一 externals
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
},
键值说明 key为 import xxx key value为引入后的值
这时在进行编译
可以看到包的大小只有1kb了 此时我们运行index.html
Uncaught ReferenceError: Vue is not defined
用externals配置后，因为bundle.js里面没有了静态资源文件，所以需要额外引入，可以在index.html引入
需要注意第三方库需在bundle.js前面引入
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script>
<script src="../dist/bundle.js"></script>
通过这种方式实现了第三方库外部加载并且我们可以使用import语法
方案二 DllPlugin
将项目依赖的基础模块（第三方模块）抽离出来，然后打包到一个个单独的动态链接库中。当下一次打包时，通过webpackReferencePlugin导入，如果打包过程中发现需要导入的模块存在于某个动态链接库中，就不能再次被打包，而是去动态链接库中get到。
如下案例将vue和vue-router打包成一个动态链接库
新键配置文件webpack.dll.config.js
let path = require('path');
let webpack = require('webpack');
module.exports={
mode:"development",
entry:{
vue:['vue','vue-router']
},
output:{
filename:'_dll_[name].js',
path:path.resolve(__dirname,'dist'),
library:'_dll_[name]',//打包后用指定变量接收
},
plugins:[
//生成manifest.json
//这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
new webpack.DllPlugin({
name:'_dll_[name]',//manifest.json的name必须与library相同才能与动态链接库建立映射
path:path.resolve(__dirname,'dist','manifest.json')//清单存放路径
})
]
}
打包后的文件存放在dist下
//manifest.json
"name": "_dll_vue",
"content": {
"../webpack4/node_modules/_process@0.11.10@process/browser.js": {
"id": "../webpack4/node_modules/_process@0.11.10@process/browser.js",
"buildMeta": {
"providedExports": true
}
},
"../webpack4/node_modules/_setimm
....
manifest.json 定义了动态链接库的很多模块，模块路径对应打包后文件（_dll_vue.js）里面的路径
//_dll_vue.js
var _dll_vue =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
...
**/ "../webpack4/node_modules/_setimmediate@1.0.5@setimmediate/setImmediate.js":
/*!*********************************************************************************!*\
!*** ../webpack4/node_modules/_setimmediate@1.0.5@setimmediate/setImmediate.js ***!
\*********************************************************************************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {
eval("/* WEBPACK VAR INJECTION */(function(global, process) {(function (global, undefined) {\n \"use strict\";\n\n if (global.setImmediate) {\n return;\n }\n\n var nextHand
...
_dll_vue.js存放打包后的各个模块
接下来我们要在html中引入_dll_vue.js
但是默认它不知道怎么去动态链接库去找相关模块，既然配置了动态链接库我们就不希望在用到vue的时候还将其打包，所以我们还得配置正式的webpack.config 告诉webpack先去动态链接库找相关模块。
let webpack = require('webpack')
...
plugins:[
new webpack.DllReferencePlugin({
manifest:path.resolve(__dirname,'dist','manifest.json')
})
]
...
此时打包 文件只有1.kb
并且可以使用import 语法
import Vue from 'vue';
import VueRouter from 'vue-router'
let vm = new Vue({
})
console.log(vm)
console.log(new VueRouter)
