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

前端开发目前在市场上的需求变的越来越重要

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

当打包构建应用时，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')
           

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