性能分析和CDN的应用

性能分析

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

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

它的应用非常简单

 npm run build:prod -- --report

这个命令会从我们的 入口main.js 进行依赖分析，分析出最大的包，方便我们进行观察和优化

执行完这个命令，我们会看到类似下图

CDN的使用

如图所以，方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向

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

webpack排除打包

CDN是一个比较好的方式

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

使用方式

先找到 vue.config.js， 添加 externals 让 webpack 不打包 xlsx 和 element

vue.config.js

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

再次运行，我们会发现包的大小已经大幅减小

CDN文件配置

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

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

vue.config.js

  const jsCDN = [
    'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js',
    'https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.4/xlsx.min.js'
  ]

但是请注意，这时的配置实际上是对开发环境和生产环境都生效的，在开发环境时，没有必要使用CDN，所以要使用环境变量来进行区分

// 判断当前所在的环境 如果环境变量从 .env.development 拿出来的, 就证明是开发环境
const isDev = process.env.ENV === 'development'
// 默认情况下, 既不排除任何包, 也不引入任何 cdn
let externals = {}
let jsCDN = []
if (!isDev) {
  // 判断到当前实在非开发环境, 追加排除的包以及远程cdn地址
  // 配置排除打包的对象
  // 里面的属性是以 key: value 键值对形式指定
  // 需要被排除的包名: 排除以后再全局可以替代的变量名
  externals = {
    // 'jQuery': '$',
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX'
  }
  // 创建数组管理要引入的 cdn 地址
  jsCDN = [
    'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js',
    'https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.4/xlsx.min.js'
  ]
}

注入CDN文件到模板

之后通过 html-webpack-plugin注入到 index.html之中:

  chainWebpack(config) {
       ......
    // 拦截html的生成, 在参数中添加 cdn 数组
      config.plugin('html').tap(args => {
        args[0].jsCDN = jsCDN
        return args
    })
  }

找到 public/index.html。通过你配置的CDN Config 依次注入 css 和 js。

    <body>
       ......
      <!-- 引入JS -->
      <% for(var js of htmlWebpackPlugin.options.jsCDN) { %>
        <script src="https://juejin.im/post/7126210862280343589/<%=js%>"></script>
      <% } %>
    </body>

最后，进行打包

 npm run build:prod