Vue项目开发中使用路由懒加载

Vue项目开发中使用懒加载

一、使用路由懒加载的好处

当打包项目时，JavaScript包会变的非常大，影响页面加载，要是通过把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加提供效率。

二、安装相关的依赖包

详细可查看路由官方文档

安装依赖包文档

安装依赖包完成后，需要配置到项目里面

三、在babel.config.js声明该插件依赖

"@babel/plugin-syntax-dynamic-import"

四、将路由改为按需加载的形式

由imprort 改为const

// import Cate from '../components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "Cate_Parms" */ '../components/goods/Cate.vue')

在使用以上形式时，是要在安装依赖包前提下！！！
这样路由的懒加载就完成了。

Vue项目开发中使用路由懒加载相关推荐

vue中的路由懒加载
文章目录路由懒加载 vue异步组件 ES import 常用路由懒加载懒加载本质是延迟加载或按需加载,即在需要的时候的时候进行加载. 首页不用设置懒加载,一个页面加载过后再次访问不会重复加载. ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
Vue路由懒加载报错问题解决
使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理解决办法: 安装babel用来编译import异步引用 ...
vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
vue 之路由懒加载
vue打包后的js文件越来越大,这会是影响加载时间的重要因数.当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率.下面是几种常见vue路由懒加载的方法. 方法一 resolve 这 ...

Vue项目开发中使用路由懒加载

Vue项目开发中使用懒加载

一、使用路由懒加载的好处

二、安装相关的依赖包

三、在babel.config.js声明该插件依赖

四、将路由改为按需加载的形式

Vue项目开发中使用路由懒加载相关推荐

最新文章

热门文章