前端性能优化方案-路由懒加载实现

Posted chineseliao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化方案-路由懒加载实现相关的知识,希望对你有一定的参考价值。

组件懒加载也叫按需加载;

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

打包 build 后的 dist 中 js 包文件太大,影响页面加载速度,使用 vue 的异步组件和 webpack 的代码分割功能,实现路由组件的懒加载;

下面通过 vue 的异步加载和 webpack 来实现组件懒加载;

先看例子不使用路由懒加载的情况:

import Vue from ‘vue‘;
import Router from ‘vue-router‘;
import HelloWorld from ‘@/components/HelloWorld‘;
import Login from ‘@/components/Login‘;

Vue.use(Router);

export default new Router(
  routes: [
    
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    , 
      path: ‘/login‘,
      name: ‘Login‘,
      component: Login
    
  ]
);

然后改造成路由懒加载的代码:

import Vue from ‘vue‘;
import Router from ‘vue-router‘;
// import HelloWorld from ‘@/components/HelloWorld‘;
// import Login from ‘@/components/Login‘;

Vue.use(Router);

export default new Router(
  routes: [
    
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: () => import(/* webpackCunkName: "HelloWorld" */ ‘@/components/HelloWorld‘)
    , 
      path: ‘/login‘,
      name: ‘Login‘,
      component: () => import(/* webpackCunkName: "Login" */ ‘@/components/Login‘)
    
  ]
);

按需加载的核心代码就是这一段,vue和react框架都能这样使用;这个能力不是vue框架提供的,而是 webpack 提供的,需要 webpack 的版本在 2.4 以上

() => import(/* webpackCunkName: "HelloWorld" */ ‘@/components/HelloWorld‘)

到此未知就完成了,按需求加载就搞定了,很简单吧;

欢迎关注博主:微信公众号

技术图片

 

以上是关于前端性能优化方案-路由懒加载实现的主要内容,如果未能解决你的问题,请参考以下文章

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

前端面试题之性能优化篇

前端优化-图片懒加载

性能优化-懒加载(图片 组件 路由)

前端性能优化--图片懒加载(lazyload image)

前端性能优化--图片懒加载(lazyload image)