打包上线时 使用CDN服务器优化性能提高访问速度

首先，我们可以使用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' // 判断是否是生产环境

2.  let externals = {}   先定义 webpack排除包设置   下面有externals  接收当是development时不需要排除

是production环境我们就需要如下操作  ：
a.  设置externals排除项        配置CDN文件   

b.  externals 对象里面设置的是  键值对  建key是我们需要排除的包名  value是CDN文件对应的全局变量 （插件）

c.    cdn对象内存入 css数组    Js数组  vue.js  放置在最前面

3.注入CDN文件到模板

使用  chainWebpack(config)      webpack的执行量  config

config.plugin  插件注入到‘html’模板中     插件的事件方法.tap   args 是注入html模板的一个数组变量
就将我们配置好的cdn赋值给args  返回args

 

4..在public/index.html       配置的CDN Config 依次注入 css 和 js

head中注入js    body结尾标签前注入JS