乐趣区

关于前端:vue项目-性能分析和CDN的应用

vue 我的项目 性能剖析和 CDN 的利用

性能剖析

咱们集成了 性能,写了很多组件,最终都会打包成一堆文件,那么实在运行的性能如何呢?

咱们能够应用 vue-cli 自身提供的性能剖析工具,对咱们开发的所有性能进行打包剖析

它的利用非常简单

$ npm run preview -- --report

这个命令会从咱们的 入口 main.js进行依赖剖析,剖析出最大的包,不便咱们进行察看和优化

文件越大,对于网络带宽和访问速度的要求就越高,这也就是咱们优化的方向

像这种状况,咱们怎么优化一下呢

webpack 排除打包

CDN 是一个比拟好的形式

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

应用形式

先找到 vue.config.js,增加 externalswebpack 不打包 xlsxelement

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之中:

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,谢谢~

退出移动版