vue 配置webpack使用externals使用cdn减小打包后的大小
在vue.config.js中这样配置
const webpack = require('webpack')
const assetsCDN = {
// webpack build externals（webpack构建外链）
externals: {
vue: 'Vue',
vuex: 'Vuex',
axios: 'axios',
'vue-router': 'VueRouter'
},
css: [],
// https://unpkg.com/browse/vue@2.6.10/ (vue的cdn地址)
js: [
// vue的压缩js （也可以下载下来，改成本地文件访问；因为有时候这个镜像会在国外，我们国内访问的话慢或者访问不到。可以使用unpkg.com的国内镜像地址: unpkg.zhimg.com）
'https://unpkg.com/vue@2.6.10/dist/vue.min.js',
'https://unpkg.com/vuex@4.0.2/dist/vuex.global.js',
'https://unpkg.com/vue-router@3.5.4/dist/vue-router.min.js',
'https://unpkg.com/axios@0.27.2/dist/axios.min.js'
]
}
module.exports = {
configureWebpack: {
// 视为一个外部库，而不将它打包进来
externals: assetsCDN.externals
},
chainWebpack: (config) => {
config.plugin('html').tap(args => {
args[0].cdn = assetsCDN
return args
})
}
}
unpkg这个是前端资源cdn（公共静态资源库unpkg），由于它服务器放在国外的，我们在国内的访问速度可能会稍微慢点，但是它有个国内的镜像unpkg.zhimg.com。unpkg能加载所有npm里面的任何文件，使用url的地址拼接方式如下：
https://unpkg.com/:package@:version/:file
这里的话可以去官网看一下更深层次的用法。
除了unpkg这种依赖包的CDN资源，还有以下的cdn资源：
www.bootcdn.cn/
www.staticfile.org/
配完上面的vue.config.js后，就需要在html里面引入这些cdn了
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initital-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
// 循环引入cdn中的css文件
<%
for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) {
%>
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
// 循环引入cdn中的js文件
<%
for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) {
%>
<script type="text/javascript" href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" />
<% } %>
</head>
</html>
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一文件中，从而导致打包成功后，单文件体积过大的问题。通过externals加载外部CDN资源，在生产环境第三方库采用cdn引入，能有效减小打包出来的文件体积。凡是声明在externals中的第三方依赖包，都不会被打包，而是用配置好的cdn的代码。
