前端技术新潮流！懒加载Vue Router，网速提速不容错过

咱们得明白，前端技术真不容易，不是说能马上搞定全部的问题。搞定路由器，推荐你试下Vue.js里的Vue Router，这玩意儿超级好用，特别适合做单页应用，简直是绝配！然后别忘了跟上懒加载（Vue Router Lazy-Loading）这个新潮流，按需加载路由组件，轻松又快活，用过都说好！

Lazy-Loading的背景

以前，咱们都是一次性把所有路由部件全扔进网站，看似省事，但网站大了，部件也多了，那启动起来就慢吞吞的，看个网页还要等半天，真是急死个人。于是乎，咱们找到了个好方法——懒加载！也就是只取必要的部分。这么一搞，网页运行飞快，用着自然也就舒坦很多~

Lazy-Loading的使用方法

又有偷懒招数学了！赶快把组件属性变为一个函数，然后直接填满它，就像喝水那样简单。别担心，只要按照提示下载就行。这就是懒加载技术，比一个一个说明哪些组件需要什么，方便多了。这样子我们就可以把各种路由组件都加进去了。这样做既能减少初次加载时长，还能节省网络流量，网站速度瞬间提升起来！

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

Lazy-Loading带来的优势

懒加载，就是点哪儿哪块就现身，重启电脑也不影响。首访网页时就像跑步一样快，这种方式大大降低了浏览页数，使得页面流畅得很。另外，Webpack这个厉害家伙可以把每个文件路径变成单独的文档，网页速度简直飞起！

高级配置与优化

知道吗？用Vue Router懒加载的时候，我们还能玩出新花样！比如给每个路由取个名字，这样大家一下子就明白了。不仅如此，还让代码变得更加干净利落，工作速度也更快！

示例代码解读

记得用webpackChunkName给文件起名字~这样每个地址都能精准匹配到对应文件啦解决问题超方便，团队协作管理也不再难

总结与展望

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About')
  }
]

猜猜看我刚发现啥？懒加载真是神器，让网站飞起来似的快。比如，服务器提前加载需要渲染的路由组件，再用Webpack切分代码提速首页，这样网页又顺滑又快。滑动或点一下都不卡顿，是不是超棒？当个程序员就要让大家享受到敏捷互联网的乐趣。

快来看看这个贴子，教你怎么用VueRouter的懒加载功能让网站变得超快！常过来逛逛，学点儿新东西！