react loadable 實現路由懶載入

安裝依賴：

yarn add react-loadable

建立通用工具類：

src/util/loadable.js

/*路由懶載入(非同步元件)*/

import react from 'react';
import loadable from 'react-loadable';
//通用的過場元件
const loadingcomponent =()=>
//過場元件預設採用通用的，若傳入了loading，則採用傳入的過場元件
export default (loader,loading = loadingcomponent)=>);
}

router裡面呼叫方式改為如下

/*配置路由*/

import react, from 'react'
import from 'react-router-dom'
import loadable from '../util/loadable'
const home = loadable(()=>import('@pages/home'))
const routes = () => (
);export default routes

封裝之後，laodable只需寫一次，改變的只是元件的引入方式，這樣一來就方便多了，

react-loadable是以元件級別來分割**的，這意味著，我們不僅可以根據路由按需載入，還可以根據元件按需載入，使用方式和路由分割一樣，只用修改元件的引入方式即可

react loadable 效能優化

前言 在開發react單頁面應用時，我們會遇到乙個問題，那就是打包後的js檔案特別巨大，首屏載入會特別緩慢。這個時候我們應該講 進行分割，按需載入，將js 拆分成若干個chunk.js,用到就載入，react loadable就可以很好地解決這個問題。1.安裝 yarn add react load...

快速排序演算法實現（遞迴實現 棧實現）

基本思想 選擇乙個基準元素,比如選擇最後乙個元素,通過一趟掃瞄，將待排序列分成兩部分,一部分比基準元素小,一部分大於等於基準元素,此時基準元素在其排好序後的正確位置，又稱為軸位置，此位置的元素確定後不再參與排序，然後再用同樣的方法遞迴地排序劃分的兩部分。分析 快速排序是不穩定的排序。快速排序的時間複...

介面實現與配置實現

在實現系統功能的時候，通常會首先定義好功能的介面，在系統功能不斷被實現的過程中，慢慢的發現有些介面的實現很類似，這個時候通常會開始做一次抽象，形 成乙個共同的部分，慢慢的系統形成了乙個抽象的層次，而為了通用，通常是通過定義介面，形成乙個抽象類，抽象類中暴露出一些抽象方法供外部擴充套件實 現，逐步的積...