小编这一期跟大家讲一下关于优化Vue性能相关的知识，众所周知Vue是一个轻量级的框架，源码仅仅为72.9KB，但是它也有缺点，就是首屏加载会比较慢，因为和传统项目相比，Vue会在首屏加载时加载出所有的组件和插件，并且向服务器请求数据，有时导致首屏加载的时间就会到4，5秒。这样做很明显是在挑战用户的耐心，按照惯例，最好能把加载时间控制在1秒左右。那如何来实现呢，接下来小编讲一下Vue性能优化的两个方向：
一．源码优化
1.代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方直接引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。
2.for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快的找到该条数据，当旧值和新值去对比时，可以更快的定位到diff。
3.Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。
4.理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。
5.可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。
二．打包优化
1.修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，并且在生成环境是可以通过map去查看到源码的，这样会造成源码泄漏，这里建议大家设置为false。productionGzip设置为true可以开启gzip压缩，使打包过后体积变小。
2.使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件,在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式引入需要的插件。
3.减少图片使用，对于网页来说，图片会占用很大一部分体积，优化图片的操作可以有效的加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。
4.按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。
三．总结
这篇文章小编大概细化了一下关于Vue的一些优化方向，大家一定要记得，对于前端这个岗位来说，性能优化是一个很重要的点，为了让用户有更好的体验，大家在提升自己技能的同时也要关注这些细小的方面。
更多Vue性能相关的知识，请继续关注我们-课工场，技术交流，技能提升，做最喜欢的自己
网友评论