一、图片懒加载
Vue里大图加载挺费劲儿还影响速度？别担心，我们有个小妙招，让速度飞起~就是用Vue自带的vue-lazyload载入器。安装后，在组件上挂上v-lazy指令。这样等到需要显示图片的时候再加载，初期压力瞬间减半，用得超爽！
懒加载真好用！让网页速度快如闪电，还有助于节省流量喔~特别是用手机看大图的话，一开启这项功能，页面切换起来不要太爽！这样你的网站就更快更讨人喜欢了，简直双赢
二、路由懒加载
npm install vue-lazyload
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
loading: 'loading.gif',
error: 'error.png',
})
做应用程序哪能离得开路由器？特别是页面巨多的那种，要是加载起来慢吞吞的，那大伙儿可就要抓狂。所以，咱们要学学什么叫“路由懒加载”这小窍门儿。说白了，就是不用每次都是所有的路由一次都加载出来，而是可以根据需要来决定加载哪些。同样的，也要修改一下那个路由配置文件，让它具备这个能力。这么操作后，你会发现整个 APP 打开的速度嗖嗖的提升了！
用路由器懒加载，网页速度嗖嗖的，感觉还挺好。换别的路线？没问题，只加载你看得那块儿，方便又快。即使网络不给力的手机也能用它飞奔着浏览网页！
三、避免重复渲染
用Vue做app时，每次都得重改每个小部件真心烦，想想就累人！这时候Vue就给你送了个名叫 key 的贴心小助手，告诉它哪些小部件可以重复使用，这样就可以准确把握更新时间和显示方式。
const Home = () => import('@/views/Home')
const About = () => import('@/views/About')
记住用好key，让你的网页运行飞快，轻松省心哟~尤其是你的数据变动时，Vue就能知道哪个要重刷，哪个直接用原来的版本，这样能省下系统资源，加速网页刷新，好好记着！
const routes = [
{
path: '/',
component: Home,
},
{
path: '/about',
component: About,
},
]
四、虚拟滚动
有时候，vue app的信息一涌而上，加载速度就像蜗牛爬。一般我们都直接把所有东西全显示在屏幕上，但这样做可能导致电脑卡机甚至浪费资源。现在，问题来了，咱们该怎么办？有个方法叫“虚拟滚动”，听起来挺神奇的！
用vue-virtual-scroller这个小神器，可以让很长的列表滑动起来超流畅哒！它知道只展示我们能够看见的那部分，接着还会随着我们滑动的位置切换显示的数据。这样子无论小主有多少条目的清单，都不会感觉到卡顿！
{{ item.name }}
五、异步组件加载
直接全部加载大件可会让程序变慢呀。别急，有办法！试试看异步组件加载这个妙招，就像给应用加个油门儿，快速启动起来。
情怀就是用上Webpack的分块功能，随时都可以加上去。不用怕多余组件一来就触发加载，这样能帮你节省好多资源的说，棒棒哒；只要你要用那个模块，它才会主动下来安装并激活，真可谓是既低碳环保又省心省力了
…
npm install vue-virtual-scroller
（更多内容请自行添加）
import Vue from 'vue' import VirtualScroller from 'vue-virtual-scroller' Vue.use(VirtualScroller)
。
评论0