Vue路由按需加载（路由懒加载）

最新推荐文章于 2024-05-17 14:04:47 发布

sxl140222

最新推荐文章于 2024-05-17 14:04:47 发布

阅读量227

点赞数 3

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/sxl140222/article/details/118329820

版权

为什么需要懒加载？

　　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，用户体验很不好。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。需要的时候加载页面，可以有效的分担首页所承担的加载压力，提升用户体验。

目前有三种方式实现路由组件的懒加载，分别是：

1. vue异步组件

把路由配置，进行修改

{

    path: '/shopcar',

    name: 'shopcar',

    component: resolve => require(['@/views/ShopCar'],resolve)

}

1）、运行是打开chrome的network，就会看到进入路由 /shopcar 时，会多出另外一个js文件。一般是0.js或者1.js

2）、用npm run build打包时，wep

关注