code-splitting

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

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

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

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

  1. bundle-loader
    代码搞得太长



  2. react-loadable
  3. 在react-v16.6之后可以使用React.lazy和React.Suspense替换react-loadable

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


  4. 自定义lazyComponent

按需异步加载redux模块

精髓:replaceReducer

Redux store 的动态注入

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

精髓:dynamic

看下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使用与实现
原文链接:segmentfault.com

上一篇:手把手教你搭建React组件库(超详细)
下一篇:关于Promise的一点东东系列(二)

相关推荐

官方社区

扫码加入 JavaScript 社区