vue项目性能分析和CDN应用性能分析我们把功能集成了，写了很多组件，最后打包成一堆文件，那么真实的运行性能如何呢？我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析。它的应用很简单$npmrunpreview----report这个命令会从我们的入口main.js开始进行依赖分析，分析最大的包，方便我们观察和优化。文件越大，对网络带宽和访问速度的要求就越高。这是我们优化的方向。在这种情况下，我们该如何优化呢？webpack排除打包CDN是一种更好的方式文件不大？我们不需要把这些大文件和那些小文件打包在一起。我们可以把xlsx、element等功能插件放在CDN服务器上。首先，减小整体封装的尺寸。第二，CDN的加速服务可以加快我们访问插件的速度。使用方法是先找到vue.config.js，添加externals让webpack不打包xlsx和elementvue.config.js//排除elementUIxlsx和vueexternals:{'vue':'Vue','element-ui':'ELEMENT','xlsx':'XLSX'}再次运行，我们会发现打包后的大小已经大大减少了CDN文件配置，但是没有打包的模块怎么处理呢？可以使用CDN预先引入vue.config.jsconstcdn={css:[//element-uicss'https://unpkg.com/element-ui/lib/theme-chalk/index.css'//stylesheet],js:[//vue必须先！'https://unpkg.com/vue/dist/vue.js',//vuejs//element-uijs'https://unpkg.com/element-ui/lib/index.js',//elementUI'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js','https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js']}但是请注意，此时的配置其实对开发环境和生产环境都是有效的。在开发环境中，不需要使用CDN。这时候我们可以使用环境变量来区分letcdn={css:[],js:[]}//使用环境变量来区分是否使用cdnconstisProd=process.env.NODE_ENV==='production'//判断是否是生产环境letexternals={}if(isProd){//如果是生产环境，排除打包，否则不排除externals={//key(包名)/value(这个值需要获取CDN中的js，相当于获取到的js中的全局包对象名)'vue':'Vue',//下面的名字不能随便选，应该是全局对象名在js'element-ui':'ELEMENT',//都是在js中全局定义的'xlsx':'XLSX'//两者都是在js中全局定义的}cdn={css:['https://unpkg.com/element-ui/lib/theme-chalk/index.css'//提前引入elementUI样式],//放置css文件目录js:['https://unpkg.com/vue/dist/vue.js',//vuejs'https://unpkg.com/element-ui/lib/index.js',//元素'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js',//xlsx相关'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js'//xlsx相关]//放置js文件目录}}将CDN文件注入模板，通过html-webpack-plugin注入index.html:config.plugin('html').tap(args=>{args[0].cdn=cdnreturnargs})通过你配置的CDNConfig找到public/index.html依次注入css和js。<%for(varcssofhtmlWebpackPlugin.options.cdn.css){%>
