首先，我们可以使用vue-cil提供的性能分析工具 npm run preview -- --report （这个命令会从我们的入口main.js进行依赖分析，分析出最大的包） 会返回网址 进去会看到我们每个包的大小。 文件越大，对于网络带宽和访问速度的要求就越高。这也就是我们优化的方向。
我们可以将比较大的，功能性很全的插件文件 打包上线的时候排除掉，放到CDN服务器去，减轻整体包的大小，使用CDN的加速服务加快我们的插件访问速度。
具体步骤： vue.config.js 1.我们对CDN配置实际上是对开发环境和生产环境都生效的，在开发环境时，没有必要使用CDN，此时我们可以使用环境变量来进行区分 vue .判断node.js环境变量 是production 来区分是否使用cdn const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境
- let externals = {} 先定义 webpack排除包设置 下面有externals 接收当是development时不需要排除
production环境我们就需要如下操作 ： a. 设置externals排除项 配置CDN文件
b. externals 对象里面设置的是 键值对 建key是我们需要排除的包名 value是CDN文件对应的全局变量 （插件）
c. cdn对象内存入 css数组 Js数组 vue.js 放置在最前面
let externals = {}
let cdn = { css: [], js: [] }
const isProd = process.env.NODE_ENV === 'production'
if (isProd) { externals = { 'vue': 'Vue', 'element-ui': 'ELEMENT', 'xlsx': 'XLSX' }
cdn = { css: [ 'unpkg.com/element-ui/…' ], js: [ 'unpkg.com/vue/dist/vu…', 'unpkg.com/element-ui/…', 'cdn.jsdelivr.net/npm/xlsx@0.…', 'cdn.jsdelivr.net/npm/xlsx@0.…' ] } }
3.注入CDN文件到模板
使用 chainWebpack(config) webpack 的执行量 config
config.plugin 插件注入到‘html’模板中 插件的事件方法.tap args 是注入html模板的一个数组变量 就将我们配置好的cdn赋值给args 返回args
externals: externals
config.plugin('html').tap((args) => { args[0].cdn = cdn return args })
4..在public/index.html 配置的CDN Config 依次注入 css 和 js
head中注入js body结尾标签前注入JS
引入样式
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<% } %>引入JS
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<% } %>
