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')
           

到此未知就完成了，按需求加載就搞定了，很簡單吧；