Vue项目的性能优化

Vue项目的性能优化

1、v-for 正确设置key值

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 Vue 优化渲染。这些 key 必须是唯一的数字或字符串，Vue 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

2、封装复用的模块（http请求）、组件（ui库）

3、路由懒加载：component：() => import(‘./xxx.vue’)

减少首屏加载文件的大小，提高首屏的加载速度

4、productionSourceMap: false

项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了 map 文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
但是我们有时候并不需要这个文件，通过以下的设置可以让 Vue 打包的时候不生成 .map 文件，缩小生产环境的包大小。
去 config/index.js 中改一个参数：
/*** Source Maps*/productionSourceMap: false,
把这个改为 false。不然在最终打包的文件中会出现一些 map 文件

5、启用gzip压缩，打包体积更小

参考地址：https://blog.youkuaiyun.com/xl4277/article/details/109226711

productionGzip: false,

productionGzipExtensions: ['js', 'css'],

6、keep-alive 缓存不活跃组件

7、插件CDN方式引入，减小项目体积

8、图片使用CDN地址，图片懒加载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KMSGAs45-1669876135135)(https://note.youdao.com/favicon.ico)]