react spa体积优化

痛点

首屏加载缓慢，目前的体积包过于庞大

解决思路

将目前的bundle进行拆包，主要的方式为两种：

1. 路由懒加载
2. 大体积module懒加载

方式

经过查看，目前市面上路由懒加载使用的工具有如下：

• require.ensure
• import()
• lazyload-loader
• react.lazy
• bundle-loader
• react-loadable

传送门
webpack异步加载的原理
Webpack实现路由懒加载的三种方式
基于webpack4+react 的js懒加载
webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载）
react-loadable路由懒加载

lazy

使用方式

修改页面类导出的方式

之前:
export {ProductDetail as ProductDetail} from './detail/product-detail';

之后:
const LazyProductDetail = lazy(() => import('./detail/product-detail').then(mod => mod.ProductDetail));
class ProductDetail extends Component {
  render() {
    return (
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <LazyProductDetail {...this.props}/>
        </Suspense>
      </div>
    );
  }
}
export {
  ProductDetail
};

PS: 此外，react-loadable和react lazy使用方式基本一致

涉及修改内容

1. web页面导出需修改导出方式
2. 该种导出方式和react native不兼容

经过测试发现，目前React.lazy并不支持除default外的导出支持。遂后续采用的是react-loadable。

react-loadable+loader

使用方式

编写自定义webpack loader，通过解析每个模块导出页面的index.js文件，转换为lazy导出方式

导出方式如下：

export {ProductHome as ProductHome} from './product-home';
export {ProductItem as ProductItem} from './product-item';
export {ProductList as ProductList} from './product-list';
export {ProductDetail as ProductDetail} from './detail/product-detail';
export {IntelligentCustomer as IntelligentCustomer} from './detail/intelligent-customer';
export {TransferDetail as TransferDetail} from './detail/transfer-detail';
export {ProductListItem as ProductListItem} from './product-list-item';
export {IntentBuy as IntentBuy} from './detail/intent-buy';

loader代码：

let source = `
export {ProductHome as ProductHome1} from './product-home';
export { Test1 } from './test1';

export {ProductHome as ProductHome, ProTest as ProTest } from './product-home';
export { Test21, Test22 } from './test2'

export * from './test3';
export default Test3;
import { Test4 } from './test4';
import Test5 from './test5';
`;

function generate(source) {
  let reg = /export[ ]{1,}\{(.*)\}[ ]{1,}from[ ]{1,}(.*)[;]{0,1}/;
  let exportClassList = [];

  let outsource = source.split('\n').filter(item => item.trim()).map(item => {
    let out = item.match(reg);

    if(out && out.length > 1 && out[1].indexOf(',') == -1) {
      let classNameList = out[1].split(' as ');
      let originClassName = classNameList[0].trim();
      let exportClassName = classNameList.length > 1 ? classNameList[1].trim() : originClassName;

      let path = out[2].replace(';', '').trim();

      exportClassList.push(exportClassName);

      return `
    const ${exportClassName} = Loadable({
      loader: () => import(${path}),
      loading() {
        return <div></div>
      },
      render(loaded, props) {
        let Component = loaded.${originClassName};
        return <Component {...props}/>;
      }
    });
      `;
      return `export {${originClassName} as ${exportClassName}} from ${path};`
    } else {
      return item;
    }
  }).join('\n');

  return `
    import React, { Component } from 'react';
    import Loadable from 'react-loadable';
    
    ${outsource}

    export {
      ${exportClassList.join(',')}
    }
  `;
  return `${outsource}`
}

module.exports = function (content) {
  return generate(content);
};

补充知识点

1. webpack的执行流程
2. 如何编写一个loader

涉及修改内容

1. 需规范我们的页面导出方式
2. 配置webpack loader

bundle-loader

使用方式

1. webpack修改配置，loader增加bundle-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.bundle\.js$/,
        use: 'bundle-loader'
      }
    ]
  }
}

本质上是将匹配的文件包裹require.ensure, 代码如下：

if(query.lazy) {
  result = [
    "module.exports = function(cb) {\n",
    "   require.ensure([], function(require) {\n",
    "       cb(require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), "));\n",
    "   }" + chunkNameParam + ");\n",
    "}"];
}

此时，已不支持如下导出方式

export {ProductDetail as ProductDetail} from './detail/product-detail';

2. 提供支持懒加载包裹的组件，如下:

class Bundle extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      // 默认为空
      mod: null
    }

    console.log("xxxxxx", props.load);
  }
 
 
  componentWillMount() {
    // 加载初始状态
    this.load(this.props);
  }
 
  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }
 
  load(props) {
    // 重置状态
    this.setState({
      mod: null
    });

    // 传入组件的组件
    props.load((mod) => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }
 
  render() {
    // 不为空，则渲染传入的子组件函数
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

3. 修改路由声明

<Route key={config.path} path={config.path} render={(props) => {
  return <Bundle load={config.component}>
    {
      Comp => {
        if (Comp) {
          let C = Inject(Comp, config.options);
          return <C {...props} {...parentState.query}  title={config.options.title}/>
        } else {
          return <div>Loading...</div>
        }
      }
    }
  </Bundle>
}}exact/>

PS: 此外，require.ensure、import()和bundle-loader使用基本一致

涉及修改内容

1. 页面导出在路由文件中按文件路径进行引用
2. webpack需配置懒加载的文件项
3. cp库支持懒加载路由