code-splitting

要知道按需加载分2种类型的文件

  1. 按需加载组件
  2. 按需加载redux模块

我们平时用的loadable只是按需加载其中的组件

按需加载组件有4种方法:

  1. bundle-loader
    代码搞得太长
    image.png
  2. react-loadable
  3. 在react-v16.6之后可以使用React.lazy和React.Suspense替换react-loadable
    code-splitting_第1张图片

    至于替换后的优点,目前只知道减少了2k大小的react-loadable库。。

  4. 自定义lazyComponent

    code-splitting_第2张图片

按需异步加载redux模块

精髓:replaceReducer

Redux store 的动态注入

使用dva时,如何动态注入store

精髓:dynamic

code-splitting_第3张图片

看下dynamic源码可以看到也是利用了replaceReducer改写reducer和saga。其思路跟Redux store 的动态注入一样。

参考:

  1. React Router v4 之代码分割:从放弃到入门
  2. react按需加载
  3. 在react-router4中进行代码拆分(基于webpack)
  4. 使用 React.Suspense 替换 react-loadable
  5. 从boilerplate中学到的redux里replaceReducer的按需使用
  6. Redux store 的动态注入
  7. dva-dynamic使用与实现

你可能感兴趣的:(react.js,dva.js)