目录
1.2 配置webpack.base.conf.js（vue-cli3的话写在vue.config.js文件中）
2.2 在webpack.prod.conf.js中添加dll代码
2.3 在package.json中添加指令（"dll": "webpack --config build/webpack.dll.js"）
3.5 此时已全部完成，以后只需要npm run build 就可以了
vue 项目打包后vendor.js过大，导致打包速度慢，首页加载慢。原因是第三方库比如（vue，vue-router，axios）都会打包在vendor.js文件里面，下面给出两种解决方案：
1.CDN优化(vue-cli3同样适用)
cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：
1.1 cdn引入各种包
在index.html中把你用到的资源通过cdn引入，资源寻找链接：https://www.bootcdn.cn/
1.2 配置webpack.base.conf.js（vue-cli3的话写在vue.config.js文件中）
下面的externals对象的属性名为package.json中对应的库的名称（固定写法）,
属性值为引入时你自定义的名称（不固定，除了ELEMENT,ELEMENT是固定的写法）
vue-cli2
vue-cli3
补充几点:
· ELEMENT是element-ui属性值的固定写法,其他的externals对象的属性值必须和你自定义的名称一样；
· 最好把cdn每个文件的版本号改成你package.json中的对应版本号；
· vue.js一定要先引入
· 如果担心cdn不稳定可以加入代码让cdn没读取成功时加载本地资源（参考链接：https://blog.csdn.net/yangfeixien/article/details/88741492）：
2.dll优化：
dll优化是把第三方库单独提取出来，而不是放在vendor.js里面，和cdn的区别是它们存在本地，比较稳定。
2.1 新建dll.js文件
在Vue-cli2搭建的项目中，在build文件夹下新建webpack.dll.js文件。
-
const path =
require(
'path');
-
const webpack =
require(
'webpack');
-
module.exports = {
-
entry: {
-
vendor: [
'vue/dist/vue.esm',
'vue-router',
'axios']
//这里把vue,vue-router,axios提取出来，可以再添加
-
},
-
output: {
-
path: path.join(__dirname,
'../static/js'),
-
filename:
'[name].dll.js',
-
library:
"[name]_library"
//这个名称和下面的name值必须一样
-
},
-
plugins: [
-
new webpack.DllPlugin({
-
path: path.join(__dirname,
"../static/js/vendor-manifest.json"),
-
name:
"[name]_library"
//这个名称和上面的library值必须一样
-
})
-
]
-
}
2.2 在webpack.prod.conf.js中添加dll代码
2.3 在package.json中添加指令（"dll": "webpack --config build/webpack.dll.js"）
此时运行 npm run dll （static/js文件夹下会生成两个文件）：
2.4 在index.html中引入文件
<script src="./static/js/vendor.dll.js"></script>3.5 此时已全部完成，以后只需要npm run build 就可以了
转载：https://blog.csdn.net/weixin_48337566/article/details/116793155