搞掂了vueSPA，觉得路由管理太爽了！用VueRouter超有感觉，功能多到数不过来。特别是做大型项目时，懒加载和预加载绝对神助攻！今天就聊聊这个，跟大家分享下经验~
一、理解路由的懒加载
以前做项目时，为了省事儿，我把所有材料全堆在一个文档里，结果文档越来越大，让大家看网页卡得不行。我就琢磨着怎么改进。然后发现有种技术叫做懒加载，就是把路由组件拆成几块儿，点开才显示，这样一弄，页面就小多了，速度也更快！
二、实践路由的懒加载
Vue同步组件真的好用，特别在懒加载这块儿表现得超级赞！只需要标记需要懒加载的部件儿然后交给Webpack处理代码分割就能搞定。这样程序运行起来更顺畅，还有记得调整下Webpack的配置，调整好了代码分割速度还能更快！
三、探索路由的预加载
实话实说，懒加载虽然能提速，但是有时用户还是得重复刷某些页面。我就寻思，要是一开始就在启动的时候把这些页面的代码都准备好了，体验会不会更好？于是我开始研究webpack怎么完成这个预加载任务，搞了半天，最后利用神奇的注释和webpackChunkName选项成功地预加载了特定组件。
const Home = () => import('./views/Home.vue')
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
四、预加载与懒加载的权衡
说实话，预加载和懒加载掌握好了才是最好用滴！预加载确实能让后面网页秒开，不过要是载入的东西太多了，刚开始还是会有点卡的所以，我通常都是看大家的使用情况和实际需求来安排哪些要提前加载，哪些可以慢慢等~
module.exports = {
// ...
output: {
// ...
chunkFilename: 'js/[name].[chunkhash].js'
},
// ...
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
cacheGroups: {
vendors: {
test: /[/]node_modules[/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
五、代码分割的深入理解
用懒加载和提前加载分开处理代码，省时又明理，找错易、改舒服，更新维护也不再难熬。
六、用户体验的重要性
更新过，这感觉就像开了“狂奔”模式，手指滑动间网页迅速跳跃，用起来倍感舒坦！接下来，我会更注重你们的使用感受，琢磨每一个小细节，让大家玩得尽兴。
七、持续学习与进步
const Home = () => import(/* webpackPreload: true */ './views/Home.vue')
在这日新月异的现代社会里，咱们得认识清楚读书是个永远没完没了的活儿。一旦有了新技巧，咱们这些搞编程的可不能拖沓，得抓紧时间钻研如何运用！用过后才发现，原来VueRouter的懒加载和预加载还挺好用的能让我更游刃有余地学习，跟上这个时代的步伐哟。
跟着这篇小指南学一下，你马上就可以掌握用VueRouter神奇地搞定路由懒加载和预加载啦～这样一操作，你的APP速度一下子就提升上去了！有疑问尽管在这儿提问，别忘了夸奖我并推荐给你的小伙伴们，大家一起来进步、相互激励、共同成长！
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
},
// ...
]
})
评论0