react以組件爲中心的代碼分割和懶加載

 

 

背景

隨着項目愈來愈複雜，功可以愈來愈多，JS單個文件就會比較臃腫，js代碼拆分顯得必不可少。

Js文件拆分主要分爲按照路由進行js拆分、按照組件進行js拆分。

1. 按照路由拆分：由於本項目請求路徑得緣由，按照路由拆分不適用。只能按照組件模式進行拆分。
2. 按照組件進行拆分，可以將js拆分的更爲完全。本方式使用react-loadable

按組件組件拆分

未進行組件文件拆分，大小以下：

showTabs，結算以及票據模塊拆分以後項目js大小以下：20m

拆分完成信貸模塊以後

所有組件拆分完畢：

拆分出現的問題以及解決方式

拆分太細出現一個很是嚴重的問題就是：佔用內存太高，啓動的時候代碼崩潰了。目前的解決方式是在修改打包方式，強制改變V8默認內存限制

 

  "scripts": {

    "start": "set BROWSER=none&&set HOST=127.0.0.1&&set PORT=8000&&roadhog server",

    "lint": "eslint --fix --ext .js src",

    "build": "node --max_old_space_size=4096 node_modules/roadhog/lib/build.js",

    "precommit": "npm run lint"

  }

 

拆分文件改造

項目全部的組件都集中在showTabs上，致使打包的時候該文件最大，如今拆分組要是針對showTabs.jsx文件進行拆分，拆分方式以下：

1. 針對import引入的組件進行按需加載，按功能劃分

在Common中按照功能劃分不一樣的文件，並將功能組件進行按需加載

引用方式

import Loadable from 'react-loadable';
/********組件加載事件處理*********/
const  MyLoadingComponent = ({ error }) => {
    if (error) {
        return <div>Error!</div>;
    } else {
        return <div>Loading...</div>;
    }
}
//account
export const AccountInformationTable = Loadable({
    loader: () => import('components/account/AccountInformationTable.jsx'),
    loading: MyLoadingComponent
});
export const AccountInformationDetail = Loadable({
    loader: () => import('components/account/AccountInformationDetail.jsx'),
    loading: MyLoadingComponent
});
export const AccountHistoryBalanceTable = Loadable({
    loader: () => import('components/account/AccountHistoryBalanceTable.jsx'),
    loading: MyLoadingComponent
});
export const AccountTradingDetailTable = Loadable({
    loader: () => import('components/account/AccountTradingDetailTable.jsx'),
    loading: MyLoadingComponent
});
export const AccountChangeRecordTable = Loadable({
    loader: () => import('components/account/AccountChangeRecordTable.jsx'),
    loading: MyLoadingComponent
});