前言首先是对比一下我阉割版的UIDesign。想开始Vue3.0的开发，所以最近一直在看Vue3.0。二是与UI匹配的方法库，也是我最近的一个项目。是Typescript产生的一个小东西。希望对你有所帮助。TheelegantUIframework:Githubwarehouse这篇文章主要是做一个关于Vue性能优化的帖子，做一个参考文档，为以后的项目上线做一些收藏文档。如果您正在优化项目，请参考文档。开发过程在开发项目时，要注意项目的一些小技巧。下面我将列出一些常用的优化方法。同时，老规矩是查漏补缺。优先使用vIfvIf？和秀？理论上都是作用于元素的显示和隐藏，但一个是直接作用于DOM，一个是通过显示操作？的CSS。项目中大部分时候直接用vIf？而不是使用vShow？直接，只有在DOM频繁显示和隐藏的情况下，但是这种场景是非常少见的。我只用在信息推送的优先级上。项目中WebSocket推送的消息？总是在场景中使用。但是，频繁推送不同类型的通知。不要一起使用vFor和vIf。vFor的优先级？居然比vIF高？，所以当一个DOM中出现两条指令时，vFor渲染的当前列表？需要用vIf判断吗？每次。而且对应的列表又会变，这就显得很不合理了。所以当你需要执行同步指令时。尽量使用计算属性，先过滤掉vIf?不需要的值。他看起来像这样。//计算属性computed:{filterList:function(){returnthis.showData.filter(function(data){returndata.isShow})}//DOM
vForkey避免使用索引作为标识符。其实大家都知道vFor?不推荐使用索引？下标作为key?的值，这是一个很容易理解的知识点，从图中可以看出。当使用index作为标识时，当插入一条数据时，list中它后面的key发生了变化，那么当前的vFor呢？渲染，但实际上他们除了插入的Element没有变化？数据，这会导致不必要的开销。因此，尽量不要使用索引作为标识，而是使用数据中的唯一值，比如id？等领域。释放组件资源什么是资源？每创建一个东西，都需要消耗资源。资源不是凭空创造的，而是分配的。所以，在组件销毁的时候，尽量销毁我们创建的资源块，比如setInterval、addEventListener等，如果不手动释放，它们还是会占用一部分资源。这会导致不必要的资源浪费。又访问了几次，可以想象，资源使用率一定是增加了。添加事件created(){addEventListener('click',Function,false)},beforeDestroy(){removeEventListener('click',Functionfalse)}timercreated(){this.currentInterVal=setInterval(code,millisec,lang)},beforeDestroy(){clearInterval(this.currentInterVal)}长列表项会涉及到很多长列表场景。和普通的分页不同，大部分前端都在做这个无限列表？大部分新手前端都是通过一个vFor?来遍历数据的，想多了一点的就是做一个分页。滚动到底部时继续请求API？。其实，这是考虑不周的。随着数据的加载，DOM会越来越多，从而导致性能开销的问题。当页面DOM过多时，势必会对我的客户端造成一定的压力，所以对于长列表渲染，建议去掉DOM，类似图片懒加载模式，只显示出现在页面上的DOM视图是重要的DOM。网上有一些很好的方案，比如vue-virtual-scroller？图书馆等，大家可以理性选择。优化图片的合理方法图片大家应该不陌生。在网页中，往往有大量的图片资源，这些资源有大有小。当我们页面DOM中的图片很多的时候，难免会遇到一些加载慢的问题，导致图片加载不出来。网上大部分都是采用懒加载的方式。只有当图片的DOM出现在页面上时，才会加载图片。Icons使用SVG或字体图标，通过base64和webp加载小图片。较大的图片可以通过CDN加速的尽量使用CDN。大多数框架都有延迟加载图像。不要麻烦。花更多的时间来使用它。Routerloadsondemand对于路由的懒加载，如果你还不知道怎么做，那你真的应该再学一遍。懒加载路由有两种方式，一种是require?另一个是进口？当路由按需加载时，第一次加载时Vue服务的压力可以相应降低，不会出现超长白屏P0问题。下面是懒加载路由的两种写法：//requiremethodcomponent:resolve=>(require(['@/components/HelloWorld'],resolve))//importcomponent:()=>import('@/components/HelloWorld')UI框架的使用方法保证了在使用Element?、Design?等UI框架时。和其他UI框架一样，使用的是官方公开的按需组件。只有真正用到的时候才会加载当前UI框架的组件，而不是一开始就加载整个组件库。我们都知道，与其他事物相比，UI框架实际上非常庞大。因此，在方便我们开发者的同时，无形中也造成了不必要的开销。但是当项目周期开发出来的时候，你就得靠它了。所以建议尽量使用按需加载。合理止损项目。如果不介意，嫌麻烦的话，可以全局引入。import{Button}from'xxxx首屏优化众所周知，第一次打开Vue时，如果你的项目足够大，第一次加载资源的时间会比较长。由于资源还没有加载，界面的DOM不会被渲染，会造成白屏问题。用户此时并不知道是加载问题，所以会带来不好的体验。因此，通常会在public下写一个加载动画，告诉用户网页正在加载中。当页面加载成功后，页面呈现的体验要比黑屏等开机体验好很多。所以建议大家自己设计一个自己公司的loading方法放在index.html中。尽量减少项目过程中的JS文件打包后的JavaScript文件可以通过webpack进行处理，使其更加精简。在配置中，你可以做config.optimization.minimize(true);图片资源压缩可以通过image-webpack-loader对打包后的图片进行压缩吗？插件，这似乎改善了图像的加载。如果你担心破坏图片，你可以放弃使用它。$yarnaddimage-webpack-loaderconfig.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader').options({bypassOnDebug:true}).end()打包公共代码在webpack4?中，可以通过optimization.minimize?对公共代码进行打包。虽然我个人觉得这个东西对SPA的应用影响有限，但是聊胜于无。再小的文字也不是肉，所以说对细节的把控总是没完没了。但是在webpack4中，CommonsChunkPlugin也改成了SplitChunksPlugin。感受挖友评论提醒。newwebpack.optimize.CommonsChunkPlugin({name:['vendor','runtime'],filename:'[xxxxx].js'})删除沉淀代码使用Tree-Shaking？插件清理一些无用的沉淀代码丢掉。依赖库CDN加速看到有小伙伴用CDN来引入一些依赖包，觉得很Nice?，然后就开始使用了。我分离了Vue、Axios、Echarts等，在正式环境下，通过CDN，确实有一些明显的提升，大家可以试试。CDNLinkDI地址：BootCDN//在html中引入script标签后。在vue的配置中，声明configureWebpack:{externals:{'echarts':'echarts'//配置使用CDN}}后端需要配置GZIP。当然，如果你有操作Nginx的权限？，那么你可以自己开启。反正我觉得这东西还是有很大进步的。有关详细信息，请参阅本文。这里不多说。VueCLI2&3下的项目优化实践——CDN+Gzip+Prerender讲后项目优化很重要，每一个细微的改进都是对用户负责。本文是一个优化的小总结，都是开发中需要注意的地方。如果真的想在优化上发挥好，其实是很难的。你需要有很多全面的知识，而不是看一两篇文章才能说你精通。没有任何技术是随随便便就能掌握的，除非它的价值很低。或者是必备物品。所以性能优化还是需要大家在日常项目中养成良好的编码习惯，高内聚低耦合。避免死代码。这些比任何后期工作都更重要。作者：wangly19链接：https://juejin.im/post/5f0f1a045188252e415f642c来源：掘金
