对于打包的优化，除gzip和按需引入，就只有cdn是效果最明显的了。
首先使用cdn我们要明确一个事实，就是我们cdn加载的文件，他是没有所谓的按需引入的概念，他就是一个完整的包，顶多给你分为基础包、核心包、完整包啥的。
所以，引入是定死的，不可能说你用到什么功能自动引入什么功能，那是本地打包才能做到的。
就好比如element ui ，本地打包，我可以按需引入，用到什么引入什么，然后生成一个js文件，但是cdn，你要么就引入全部功能，要么就自己本地，只能这么二选一。
所以，对于像element ui 这种框架的打包优化，如果你是按需引入，你可能需要调整为完整引入，因为最终打包使用的是cdn资源，所以，对于速度可能不需要太担心。
教程
打开vue.config.js
填写一下代码
module.exports = {
chainWebpack: config => {
//生产环境下
if (process.env.NODE_ENV === "production") {
config.plugin('html')
.tap(args => {
args[0].cdn = {
js: [ "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
"https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js", 'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js', "https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js",
]
}
return args
})
}
},
configureWebpack: config => {
config.externals = {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
}
},
}
保存
再找到public/index.html 打开
在body的底部添加模板语法自动遍历需要cdn引入的js文件
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->
这样，我们对vue、vuex、router、axios这四个必备的功能进行的cdn静态资源加速。
使用文件打包分析，你会发现，已经没有了这四个js文件的包了，说明我们的设置是有效的。
补充
这里补充一个elment-ui的加速
打开vue.config.js
填写一下代码
module.exports = {
chainWebpack: config => {
//生产环境下
if (process.env.NODE_ENV === "production") {
config.plugin('html')
.tap(args => {
args[0].cdn = {
css: [
'https://cdn.jsdelivr.net/npm/element-ui@2.4.5/lib/theme-chalk/index.css'
],
js: [ "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
"https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js", 'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js', "https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js",
]
}
return args
})
}
},
configureWebpack: config => {
config.externals = {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
"element-ui": "ELEMENT",
}
},
}
再找到public/index.html 打开
在head里面添加
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN的CSS文件 -->
在body底部添加
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->
这样就行了。
