看好了，咱聊下Vue的一个好用法儿——“路由懒加载”。这个就等你真要用到的时候，再去加载那些路由组件。别浪费时间在没用的地方。这不说的是“付出多少，收获多少”，正好用来形容这个。App大了，就会加载慢，用户得等着启动。但路由懒加载能搞定这事儿！把组件拆成小份，只有用户真的要访问时才加载，那么第一次加载速度就快多了，整个App嗖地一下变快了！
想让Vue项目跑得飞快吗？试试动态引入组件，瞬间就能启动起来，还能让代码简单明了。懂得如何路由懒加载的话，项目布局会更好看，编写代码也会更加迅速！
二、路由懒加载的实现步骤
1.安装babel插件：
装这个@babel/plugin-syntax-dynamic-import的Babel插件后，就能自如操控动态加载组件了！简单易懂，赶紧去试试！
2.修改配置文件：
小伙伴们，让我们动手修改项目的babel.config.js文件~首先在@babel/preset-env里关闭模块设置，这样编译器就明白了。然后，咱们还得把@babel/plugin-syntax-dynamic-import加进去，这个小助手上线，主要是为了实现懒加载路由功能滴。
3.修改路由配置：
注意看这儿教你怎么在 Vue 里改变路由/index.js里面的组件加载方式，用懒加载的话可以省很多内存。就只需要给组件名后面加上小箭头，然后写上它在哪儿，像这样”../path/to/component.vue”，搞定了！
4.重新构建项目：
npm install --save-dev @babel/plugin-syntax-dynamic-import
搞定后别忘了重启，这样才能起作用去看看你的浏览器调试器，个个路由部件都有自己的小文件，要用时再直接加载就OK。
三、路由懒加载带来的好处
实现了路由懒加载后，对Vue项目带来了诸多好处：
快如闪电！装上这货，你的App启动得飞起，反应也超快呢～
别忘了，把每个网页都分成一个个的图。下次想美化就方便咯~
别瞎折腾服务器文件啦：用到哪个就拿哪个，节省资源！
module.exports = {
presets: [
'@babel/preset-env'
],
plugins: [
'@babel/plugin-syntax-dynamic-import'
]
}
快得飞起！上了咱们的网站，马上就会觉得速度飙升，一点也不用等全部东西全加载出来。那个流畅劲儿，简直美滋滋~
四、如何选择合适的组件进行懒加载
看哪些组件适合用懒加载，主要看你的项目和页面是否复杂。
告诉你们个事儿！我们的主页已经进行了重大修改，现在看起来更快更直观了！以前那些需要等一会儿才能出现的内容现在都精简了很多。
别乱整那些没用的：虽然看起来好玩儿的功能有点多，但那些你现在用不着的咱就先不开了呗。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
其实，这路由级别的判断就像在看这个网站里每个页面之间的猫腻，看看哪个页面被点得多哪个少什么的，然后再决定要不要用那懒加载技术。
五、注意事项与常见问题
别干等，使劲儿用起来！别一股脑儿地往项目里塞新模块，免得速度都被拖慢。
路径技巧：选条好路，Webpack就知道怎么移了！
别忘了，有些旧版浏览器对动态加载可能不太了解。因此我们在搞开发时得注意这点，要做好兼容性测试和调整。
六、总结
今天要教你们怎么用Vue制作网页~要点就是跟学下路由的懒加载部分。首先我会用最容易理解的方式讲，接下来也会告诉你这么做究竟好在哪儿，同时也要提醒你一些事项。
评论0