来了解下 React 代码分割神器 redux-dynamic-modules 吗？

站长

2022年11月12日 19:08 · 阅读数 27

如果你的项目正在使用 react 全家桶，且它有了一定的规模。

有一天，你的领导让你做性能优化，将某些不重要的、首屏不可见的部分拆成异步加载的模块。

搬砖已有几年的你，脑海闪过：

components 用 React（v16.6+）自带的 lazy 与 Suspense 组合
reducer 用 redux 自带的 replaceReducer

突然你想到：“完蛋，我还用到 saga 的 watchers，怎么办 😣？”

可能你颇有经验，联想到：“好像 saga 注册都要 sagaMiddleware.run，还返回了一个 task，可以借助它们实现动态添加 watchers 吗？我不确定啊？😫”

如果我告诉你，有个第三方库帮我们做了这些事，你会不会谢谢我啊？

就是它 redux-dynamic-modules 。

该库引入了“Redux Module”的概念，它是一组应该动态加载的 Redux 部件（Reducer，middleware）。它还暴露出一个 React 高阶组件用来在应用组件加载后加载“Module”。此外，它还与诸如 redux-thunk 和redux-saga 之类的库集成，以使这些库可以动态加载他们的部件（thunk，sagas）。

它基于 react-redux 做了封装，基于此生成的 store 拥有了动态添加模块的能力。

1. 基本使用

1.1 生成 store

import { createStore } from 'redux-dynamic-modules'
import { getSagaExtension } from 'redux-dynamic-modules-saga'
import { sagas, advancedCombineReducers, reducers } from 'reducers'

/**
    enhances: for middlewares
    extensions: for saga, thunk...
    advancedCombineReducers: for combine module reducers
    advancedComposeEnhancers: default as devTools
**/
const moduleStoreSettings = {
  advancedCombineReducers,
  enhancers: [],
  extensions: [getSagaExtension()]
}

// initial module, sagas should be an Array
const initialModule = {
  id: 'root',
  reducerMap: reducers,
  sagas
}

// create a dynamic store with addModule method
// and there can be multiple initial modules, createSrore will receive them with ... as an Array
const store = createStore(moduleStoreSettings, initialModule)

我们不需要自己再注册 sagaMiddleware，维护 saga task，把它们都交给 redux-dynamic-modules 。

1.2 动态模块注册

import React from 'react'
import AsyncComponent from './component'
import { reducerMap, sagas } from './reducers'
import { DynamicModuleLoader } from 'redux-dynamic-modules-react'

/**
    id: unique, represents this module
    reducerMap: reducers map with an Object
    sagas: several wathcers as an Array
    retained: true means this module won't be removed once added
**/
export const getModule = (): any => ({
  id: 'AsyncComponent',
  reducerMap,
  sagas,
  retained: true
})

// props modules for store to add
export default function Dynamic (props: any) {
  return (
    <DynamicModuleLoader modules={[getModule()]}>
      <AsyncComponent {...props} />
    </DynamicModuleLoader>
  )
}

2. 源码学习

这个库的代码十分简单，逻辑也很清晰，各位可以放心大胆食用。

2.1 包结构

它使用 lerna 管理多个包：

redux-dynamic-modules：主要就两行代码，导出核心包 redux-dynamic-modules-core 与 redux-dynamic-modules-react
redux-dynamic-modules-core：核心逻辑，包括 store 生成与 module 的维护。
redux-dynamic-modules-react：实现 React 高阶组件 DynamicModuleLoader，用于注册异步 module
redux-dynamic-modules-saga：与 redux-saga 中间件集成
redux-dynamic-modules-thunk：与 redux-thunk 中间件集成
redux-dynamic-modules-observable：与 redux-observable 中间件集成
xx-example：demo

2.2 核心逻辑

走进 redux-dynamic-modules 源码，不得不提到整个库的核心 refCounter。

refCounter

redux-dynamic-modules 会自动执行 module 及其内容的引用计数 (reference counting)。

这意味着：

如果已经添加过一个模块，再次添加它，就只是一个 NO-OP
如果添加了两次同一个模块，则必须将其删除两次

乍一看，似乎有点前后矛盾，其实不然：虽然重复添加两次不会成功，但 refCounter 是 2，意味着有两个地方对它有依赖，所以需要删除它就需要满足它的两个引用都被删除。

这块的源码实现也很简单：

// RefCountedManager.ts
export function getRefCountedManager<IType extends IItemManager<T>, T>(
  manager: IType,
	equals: (a: T, b: T) => boolean,
	retained?: (a: T) => boolean // Decides if the item is retained even when the ref count reaches 0 
): IType {
	let refCounter = getObjectRefCounter<T>(equals, retained);
    const items = manager.getItems();
    // Set initial ref counting
    items.forEach(item => refCounter.add(item));

    const ret: IType = { ...(manager as object) } as IType;

    // Wrap add method
    ret.add = (items: T[]) => {
        if (!items) {
            return;
        }

        const nonNullItems = items.filter(i => i);
        const notAddedItems = nonNullItems.filter(
            i => refCounter.getCount(i) === 0
        );
        manager.add(notAddedItems);
        nonNullItems.forEach(refCounter.add);
    };

    // Wrap remove
    ret.remove = (items: T[]) => {...};
    ret.dispose = () => {...};

    return ret;
}

可以看到在 add 或 remove 时，它将代表 manager 执行，下文所有 manager (如 moduleManager，reducerManager 等）的 module 与其内容 (reducer, saga, middleware) 等都会记录引用。

开始之前，先对核心包 redux-dynamic-modules-core 的文件结构组织有个了解。

src
|-- Manager
   |-- MiddlewareManager.ts
   |-- ModuleManager.ts	
   |-- ReducerManager.ts	
   |-- RefCountedManager.ts	
|-- Utils
   |-- ComparableMap.ts
   |-- Flatten.ts
   |-- RefCounter.ts
|-- Contracts.ts
|-- index.ts
|-- ModuleStore.ts

ModuleStore

这里是整个库的入口，导出 createStore 供项目中使用。它将接收并处理所有与 store 相关的逻辑，并暴露 addModules 到store，用于后续动态注册 module 。

// ModuleStore.ts
export function createStore<State>(
    moduleStoreSettings: ModuleStoreSettings<State>,
    ...initialModules: IModule<any>[]
): IModuleStore<State> {
    //	...

    // createReduxStore 即 redux 的 createStore
    const store: IModuleStore<State> = createReduxStore<State, any, {}, {}>(
      moduleManager.getReducer,
      initialState,
      enhancer as any
    ) as IModuleStore<State>;

    // 内部 dispatch 使用 store 的 dispatch，方便后续执行自定义 action
    moduleManager.setDispatch(store.dispatch);

    const addModules = (modulesToBeAdded: IModuleTuple) => {
      const flattenedModules = flatten(modulesToBeAdded);
      moduleManager.add(flattenedModules);
      return {
        remove: () => {
          moduleManager.remove(flattenedModules);
        },
      };
    };

    // ...

    store.addModules = addModules

    return store
}

真正核心逻辑在 ModuleManager 中，新增的 modules 在经过 refCounter filter 之后，进入 ModuleManager 中进行 reducer 与 saga (或 thunk) 的注册。