Lazy-Loading的概念
现在很多网站又大又“牛气”，想要尽快访问的话，下载速度跟渲染性能很关键。遇到这种情况咋办？别着急，Vue Router帮你搞定！Lazy-Loading路由这招你试试看，等真的用到某个模块时才会加载相应组件，这样就可以避免占空闲空间，网页自然也能快点~
咱们之前那老一套的单页应用，得先载入整个网页，等你要用它的时候才发现早就等着你了，耗费的时间可想而知，当然慢不过眼下咱们有了新法宝- VueRouter，里头还有个”懒加载”的好东西，再搭上Webpack的代码分割，瞬间就能确定要加载哪个模块，速度立马提升了上去！这么一来，用起来岂不是更加顺手！
懒加载就是这么回事儿，你懂？刚开网页只给你最开始那一屏显示的内容，别的慢慢等咯。等你要换页的时候，这些组件才能一点点出现。这样子可以减少压力，开机速度都变快~用了它之后，加载速度更快，内存也更省空间，这样我们搞模块开发的也轻松多了
原理和好处
动态加载组件，其实就是按需实时加载。当你打开那个网页时，只有你需要的组件才会出现，其他的就自动隐藏起来了。这样一来，网站速度更快，你看起来也更顺畅！
不如去用懒加载功能，网页秒速就能加载出来！它只会加载你需要的那部分模块，省了不少上网和等待加载的时间。比起花里胡哨的表面功夫，这个功能真的能让你更快找到要看的东西！
懒加载这个神器，简单说就是把很少使用的资源放到硬盘上，需要用的时候再从硬盘挪进内存。这招对大网站或是程序都特别管用，保持功能完全的同时，也让电脑运行起来更快。
你知道吗？在进行模块化编程时，运用Lazzy-Loading这个功能真是太方便了！它能帮我们把复杂程序分解成一个个小部分，想什么时候用就装载上。这样一来，代码更容易读懂，管理起来也简单许多，而且整个项目看起来更加整洁干净了！
具体代码示例
给你好好说说零星加载是啥意思。比如你去网上买东西，得先点开首页、宝贝list、详细信息才能看到商品呗。但是，如果你只是想看看某一块儿的页面，那就不用全打开，这样可以减缓网页变来变去的速度，用着也更舒服点儿。
npm install vue-router webpack --save
咱为啥要装VueRouter和Webpack嘞？就是用！安装好了以后，在main.js文件里拉出VueRouter，顺便设置route config呗。这么搞有啥好处？因为这样组件随时都能被调用！不过别忘了，只有指定的路由打开时，对应的组件才能“清醒”！
搞定！用vue-router的懒加载功能网页速度快多了，还可以省点内存。这意思就是，我们只要加载你当前看的那个页面就好，别的都不用管。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: () => import('./components/Home.vue')
},
{
path: '/products',
name: 'products',
component: () => import('./components/Products.vue')
},
{
path: '/product/:id',
name: 'product',
component: () => import('./components/Product.vue')
}
];
const router = new VueRouter({
routes
});
new Vue({
router
}).$mount('#app');
想知道啥叫VueRouter的懒加载吗？简单说，就是最后才加载那些拖慢网页速度的东西，这样网页会跑得快一点。看我给你们举个小实例，看完就能了解怎么使用，还不快点试试看有多好用！学会此项技能，网站性能提升可不是说说而已！
评论0