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
});