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

（含代码示例、截图演示）让中大型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“路由懒加载” 技术，让网页快速加载 （优化篇） ” 的全部内容。