vue项目|vue项目性能分析和CDN的应用 vue项目性能分析和CDN的应用

vue项目性能分析和CDN的应用性能分析

我们集成了功能，写了很多组件，最终都会打包成一堆文件，那么真实运行的性能如何呢？

我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析
它的应用非常简单

$ npm run preview -- --report

这个命令会从我们的入口main.js进行依赖分析，分析出最大的包，方便我们进行观察和优化
文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向

像这种情况，我们怎么优化一下呢

webpack排除打包
CDN是一个比较好的方式

文件不是大吗？我们就不要把这些大的文件和那些小的文件打包到一起了，像这种xlsx,element这种功能性很全的插件，我们可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度

【vue项目|vue项目性能分析和CDN的应用】使用方式
先找到 vue.config.js，添加 externals 让 webpack 不打包 xlsx 和 element
vue.config.js

// 排除 elementUI xlsx和 vue externals: { 'vue': 'Vue', 'element-ui': 'ELEMENT', 'xlsx': 'XLSX' }

再次运行，我们会发现包的大小已经大幅减小
CDN文件配置

但是，没有被打包的几个模块怎么处理？

可以采用CDN的方式，在页面模板中预先引入
vue.config.js

const cdn = { css: [ // element-ui css 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 样式表 ], js: [ // vue must at first! 'https://unpkg.com/vue/dist/vue.js', // vuejs // element-ui js '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，此时我们可以使用环境变量来进行区分

let cdn = { css: [], js: [] } // 通过环境变量来区分是否使用cdn const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境 let externals = {} 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', // element '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之中: