（含代码示例、截图演示）让中大型vue项目，按需加载文件，让网页快速渲染！

官方文档：路与懒加载

---

所谓的路由懒加载：

---

代码示例 · 对比：

1. 没有优化的代码（截图1 · 省略）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/components/index'
import Login from '@/components/login/login.vue'
import Register from '@/components/register/register.vue'
// 忘记密码 页面
import forgetPwd from '@/components/login/forgetPwd.vue'
// 关于我们
import aboutUs from '@/components/aboutus/aboutUs.vue'
// 《服务声明和隐私条款》  页面
import serviceStatement from '@/components/rules/serviceStatement.vue'
// 隐私条款
// import secretRules from '@/components/rules/secretRules.vue'// 公共组件
import NavMenu from '@/components/public/navMenu.vue'
import NavLeftBar from '@/components/public/navLeftBar.vue'
// import RightBar from '@/components/public/rightBar.vue'
import Footer from '@/components/public/footer.vue'
// footer:登录页、注册页、密码找回页
import footerLogin from '@/components/public/footerLogin.vue'
// 新版首页 （width1200版本）
import IndexMenu from '@/components/public/indexMenu.vue'
// 新版footer
import NewFooter from '@/components/public/newfooter.vue'/* 按功能划分 */
// 登录后首页
import Main from '@/components/main/main.vue'
// 1. 搜索简历
import SearchMain from '@/components/search/searchMain.vue'
// 2. 人才库
import TalentPool from '@/components/resumedatabase/talentPool.vue'
// 3. 代理招聘
// import Recruit from '@/components/agent/recruit.vue'
// 4. 分享简历
import ShareResume from '@/components/share/shareResume.vue'
// 5. 企业账户
import Account from '@/components/company/account.vue'/* 引入公共样式 */
import '../../static/css/global.css'
// 首页：引入轮播图组件
// import '../../static/plugins/swiper/swiper.min.css'// 覆写CDN：element-ui index.css / el-form组件
import '../../static/css/input.css'
// import "../../static/css/dropdown.css"
// 覆写组件样式 · 登录后首页
import '../../static/css/main.css'
// 覆写组件样式 · 新版首页
import '../../static/css/eltabs.css'// 注册挂载
Vue.component('NavMenuVue', NavMenu)
Vue.component('NavLeftBarVue', NavLeftBar)
// Vue.component('RightBarVue', RightBar)
Vue.component('FooterVue', Footer)
// footer:登录页、注册页、密码找回页
Vue.component('footerLogin', footerLogin)
// 新版首页 （maxwidth1200版本）
Vue.component('IndexMenuVue', IndexMenu)
// 新版footer
Vue.component('NewFooterVue', NewFooter)Vue.use(VueRouter)export default new VueRouter({// mode: 'history',routes: [{ // 首页path: '/',name: 'index',component: (resolve)=>require(['../components/index'],resolve),meta: {title: '首页'}},{ // 登录path: '/login',name: 'login',component: (resolve)=>require(['../components/login/login'],resolve),meta: {title: '登录页'}},{ // 注册path: '/register',name: 'register',component: (resolve)=>require(['../components/register/register'],resolve),meta: {title: '注册页'}},{ // 忘记密码path: '/forgetPwd',name: 'forgetPwd',component: (resolve)=>require(['../components/login/forgetPwd'],resolve),meta: {title: '忘记密码'}},{ // 关于我们path: '/aboutus',name: 'aboutus',component: (resolve)=>require(['../components/aboutus/aboutUs'],resolve),meta: {title: '关于我们'}},{ // 规则1：服务声明path: '/serviceStatement',name: 'serviceStatement',component: (resolve)=>require(['../components/rules/serviceStatement'],resolve),meta: {title: '服务声明'}},
/*{ // 规则2：隐私条款path: '/secretRules',name: 'secretRules',component: secretRules,meta: {title: '隐私条款'}},
*/{ // 登录后首页path: '/main',name: 'main',component: (resolve)=>require(['../components/main/main'],resolve),meta: {title: '首页'}}, { // 搜索简历path: '/search',name: 'searchMain',component: (resolve)=>require(['../components/search/searchMain'],resolve),meta: {title: '搜索简历'}},{ // 人才库path: '/talentPool',name: 'talentPool',component: (resolve)=>require(['../components/resumedatabase/talentPool'],resolve),meta: {title: '人才库'}},
/*{ // 代理招聘path: '/recruit',name: 'recruit',component: Recruit,meta: {title: '代理招聘'}},
*/{ // 分享简历path: '/shareResume',name: 'shareResume',component: (resolve)=>require(['../components/share/shareResume'],resolve),meta: {title: '分享简历'}},{ // 企业账户path: '/account',name: 'account',component: (resolve)=>require(['../components/company/account'],resolve),meta: {title: '企业账户'}}]
})

2. 优化后的代码（如下，截图2）

import Vue from 'vue'
import VueRouter from 'vue-router'
const Index = () => import ('@/components/index.vue')
const Login = () => import ('@/components/login/login.vue')
const Register = () => import ('@/components/register/register.vue')
// 忘记密码 页面
const forgetPwd = () => import ('@/components/login/forgetPwd.vue')
// 关于我们
const aboutUs = () => import ('@/components/aboutus/aboutUs.vue')
// 《服务声明和隐私条款》  页面
const serviceStatement = () => import ('@/components/rules/serviceStatement.vue')
// 隐私条款
const secretRules = () => import ('@/components/rules/secretRules.vue')
// 公共组件
import NavMenu from '@/components/public/navMenu.vue'
import NavLeftBar from '@/components/public/navLeftBar.vue'
// import RightBar from '@/components/public/rightBar.vue'
import Footer from '@/components/public/footer.vue'
// footer:登录页、注册页、密码找回页
import footerLogin from '@/components/public/footerLogin.vue'
// 新版首页 （width1200版本）
const IndexMenu = () => import ('@/components/public/indexMenu.vue')
// 新版footer
import NewFooter from '@/components/public/newfooter.vue'/* 按功能划分 */
// 登录后首页
const Main = () => import ('@/components/main/main.vue')
// 1. 搜索简历
const SearchMain = () => import ('@/components/search/searchMain.vue')
// 2. 人才库
const TalentPool = () => import ('@/components/resumedatabase/talentPool.vue')
// 3. 代理招聘
// const Recruit = () => import ('@/components/agent/recruit.vue')
// 4. 分享简历
const ShareResume = () => import ('@/components/share/shareResume.vue')
// 5. 企业账户
const Account = () => import ('@/components/company/account.vue')/* 引入公共样式 */
import '../../static/css/global.css'
// 首页：引入轮播图组件
// import '../../static/plugins/swiper/swiper.min.css'// 覆写CDN：element-ui index.css / el-form组件
import '../../static/css/input.css'
// import "../../static/css/dropdown.css"
// 覆写组件样式 · 登录后首页
import '../../static/css/main.css'
// 覆写组件样式 · 新版首页
import '../../static/css/eltabs.css'// 注册挂载
Vue.component('NavMenuVue', NavMenu)
Vue.component('NavLeftBarVue', NavLeftBar)
// Vue.component('RightBarVue', RightBar)
Vue.component('FooterVue', Footer)
// footer:登录页、注册页、密码找回页
Vue.component('footerLogin', footerLogin)
// 新版首页 （maxwidth1200版本）
Vue.component('IndexMenuVue', IndexMenu)
// 新版footer
Vue.component('NewFooterVue', NewFooter)Vue.use(VueRouter)export default new VueRouter({// mode: 'history',routes: [{ // 首页path: '/',name: 'index',component: Index,meta: {title: '首页'}},{ // 登录path: '/login',name: 'login',component: Login,meta: {title: '登录页'}},{ // 注册path: '/register',name: 'register',component: Register,meta: {title: '注册页'}},{ // 忘记密码path: '/forgetPwd',name: 'forgetPwd',component: forgetPwd,meta: {title: '忘记密码'}},{ // 关于我们path: '/aboutus',name: 'aboutus',component: aboutUs,meta: {title: '关于我们'}},{ // 规则1：服务声明path: '/serviceStatement',name: 'serviceStatement',component: serviceStatement,meta: {title: '服务声明'}},
/*{ // 规则2：隐私条款path: '/secretRules',name: 'secretRules',component: secretRules,meta: {title: '隐私条款'}},
*/{ // 登录后首页path: '/main',name: 'main',component: Main,meta: {title: '首页'}}, { // 搜索简历path: '/search',name: 'searchMain',component: SearchMain,meta: {title: '搜索简历'}},{ // 人才库path: '/talentPool',name: 'talentPool',component: TalentPool,meta: {title: '人才库'}},
/*{ // 代理招聘path: '/recruit',name: 'recruit',component: Recruit,meta: {title: '代理招聘'}},
*/{ // 分享简历path: '/shareResume',name: 'shareResume',component: ShareResume,meta: {title: '分享简历'}},{ // 企业账户path: '/account',name: 'account',component: Account,meta: {title: '企业账户'}}]
})

加载性能 · 截论对比：（以google浏览器为例）

截图1（省略）， 经过测试，结果发现：网页完成加载时间，大于都在 8s~10s 区间。（如下，截图2）相对于优化后的6s，甚是慢了很多。

总结：从截图2，我们可以看到，确实是实现了更快时间，加载文件的按需加载，组件化加载。

---

以上就是关于 “ vue“路由懒加载” 技术，让网页快速加载 （优化篇） ” 的全部内容。

vue“路由懒加载” 技术，让网页快速加载 （优化篇）相关推荐

1. 图片懒加载和Vue路由懒加载

   图片懒加载 什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...

2. Vue 路由懒加载——介绍以及遇到的问题

   使用路由懒加载的原因 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. ...

3. Vue路由懒加载报错问题解决

   使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理 解决办法: 安装babel用来编译import异步引用 ...

4. vue路由懒加载的两种方式

   1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...

5. 新技能Get：如何利用HTTP技术提升网页的加载速度

   在这个信息爆炸的时代,使用移动终端获取新鲜信息已经是大势所趋,但是移动网页浏览速度还有巨大的提升空间.据 Strangeloop Networks 统计,在同样的网络条件下,使用移动端访问相同网页平均 ...

6. vue路由懒加载_优化vue项目的首屏加载速度

   最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...

7. 性能优化---vue路由懒加载和异步组件

   1.路由懒加载 整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块. 实现方式有: 1.require:加载组件. component: resolve => req ...

8. Vue 路由懒加载

   路由和组件的常用两种懒加载方式: 1.vue异步组件实现路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) 2.es提出的import(推荐使用这 ...

9. vue 路由懒加载（延时加载、按需加载）

   import和require的区别 node编程中最重要的思想就是模块化,import和require都是被模块化所使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个 ...

最新文章

1. 3D打印机分类与速度
2. 日调度5万亿次，腾讯云微服务架构体系TSF深度解读
3. 【华为云技术分享】【Python算法】分类与预测——Python随机森林
4. Android 系统（74）---Android手势触摸事件的分发和消费机制
5. html input 字体颜色_html 元素参考整合实用收藏！前端web工程师必备!
6. mfc搜索新建access字段_vs2010MFC中使用ODBC链接ACCESS数据库，怎样编写查找功能？...
7. pandas - AttributeError: Series object has no attribute reshape
8. TechNet Magazine/TechNet杂志
9. 明天发布一个基于Silverlight的类Visio小型绘图工具项目。
10. 生物信息学 | GEO介绍与安装
11. python教孩子学编程_学编程要从娃娃抓起——教孩子学Python
12. 华硕Chromebox-cn 62+i7-5500 U+HD 5500
13. JAVA后端调用微信支付“统一下单”接口实现微信二维码扫码支付
14. 怎么轻松卸载mysql_轻松将mysql卸载干净
15. 【基础系列】赏析刘洪普《PyTorch深度学习实践》与《实战：基于CNN的MNIST手写数字识别》（Python版）
16. kubectl常用命令大全详解
17. APK打包的详细说明
18. 前端系列之实战(城市医院预约挂号平台2.基本样式编写)
19. 【Javascript】求两个对象的交集、差集
20. Oracle培训教程（CUUG沙龙）

热门文章

1. 绑定方法与非绑定方法
2. Python基础学习篇-2-数值运算和字符串
3. 微服务架构：如何用十步解耦你的系统？
4. iOS逆向之旅（进阶篇） — 重签名APP（一）
5. Spring源码系列：BeanFactory的创建
6. Mock Server利器 - Moco
7. 关于C语言中运算符优先级的一次错误
8. Fragment与Activity传递数据
9. java.net.SocketException: Broken pipe问题解决
10. DedeCMS四类核心表