vue我的项目 性能剖析和CDN的利用
性能剖析
咱们集成了 性能，写了很多组件，最终都会打包成一堆文件，那么实在运行的性能如何呢？
咱们能够应用vue-cli自身提供的性能剖析工具，对咱们开发的所有性能进行打包剖析
它的利用非常简单
$ npm run preview -- --report这个命令会从咱们的入口main.js进行依赖剖析，剖析出最大的包，不便咱们进行察看和优化
文件越大，对于网络带宽和访问速度的要求就越高，这也就是咱们优化的方向
像这种状况，咱们怎么优化一下呢
webpack排除打包
CDN是一个比拟好的形式
文件不是大吗？咱们就不要把这些大的文件和那些小的文件打包到一起了，像这种xlsx,element这种功能性很全的插件，咱们能够放到CDN服务器上，一来，加重整体包的大小，二来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: [] }// 通过环境变量 来辨别是否应用cdnconst 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之中:
config.plugin('html').tap(args => { args[0].cdn = cdn return args})找到 public/index.html。通过你配置的CDN Config 顺次注入 css 和 js。
<head> <!-- 引入款式 --> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link rel="stylesheet" href="<%=css%>"> <% } %></head><!-- 引入JS --><% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%=js%>"></script><% } %>最初，进行打包
$ npm run build:prod这样就实现了简略的优化
小结
这样咱们就能够来做咱们的我的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8k... 能够加公众号获取提取码.
若有不懂的中央，请加q群147936127交换或者vx: ltby52119，谢谢~