Vue的性能优化方案和打包分析工具。

霸王蟹2025-03-23 13:28

文章目录

一、性能分析
二、优化方案
- 1.webpack排除打包
- 2.CDN配置
总结

一、性能分析

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

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

执行命令：

c 复制代码

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

执行完这个命令，我们会看到如下的页面。

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

二、优化方案

1.webpack排除打包

找到包体积比较大的，排除。
vue.config.js

c 复制代码

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: {
    // key(要排除的包名), value(引入的CDN包的全局变量名) 
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX',
    'cos-js-sdk-v5': 'COS'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
},

再次运行，我们会发现包的大小已经大幅减小，但还是有的包会占用比较大。

2.CDN配置

注意: 此时由于排除了一些包, 所以代码是无法运行的! 必须配置 cdn 包的加载

vue.config.js

c 复制代码

const cdn = {
  css: [
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
  ],
  js: [
    // vue must at first!
    'https://cdn.jsdelivr.net/npm/vue@2.6.14', // vuejs
    'https://unpkg.com/element-ui/lib/index.js', // element-ui js
    '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',
    'https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js'
  ]
}

总结

性能优化的方案有多种，不限于文章方案，总之合理配置优化方案，有助于用户的体验。