Bundle Size Optimization

// 샘플 코드로, 실제 코드가 아닙니다

import { FormProvider } from 'rc-field-form';

const ConfigProvider = ({ validateMessages, children }) => {

const mergedValidateMessages = React.useMemo(

() => merge(antdDefaultValidateMessages, validateMessages),

[validateMessages],

);

return (

<SomeOtherProvider>{children}</SomeOtherProvider>

</FormProvider>

);

};

// 샘플 코드로, 실제 코드가 아닙니다

import { FormProvider } from 'rc-field-form';

const ConfigProvider = ({ validateMessages, children }) => {

let node = children;

if (validateMessages) {

node = <FormProvider validateMessages={merge(...)}>{node}</FormProvider>;

}

return node;

};

// 샘플 코드로, 실제 코드가 아닙니다

import { ValidateMessageContext } from '../form/context.ts';

const ConfigProvider = ({ validateMessages, children }) => {

const mergedValidateMessages = ...

return (

// 프록시 컨텍스트만 사용

<SomeOtherProvider>{children}</SomeOtherProvider>

</ValidateMessageContext>

);

};

// 샘플 코드로, 실제 코드가 아닙니다

import Form, { FormProvider } from 'rc-field-form';

import { ValidateMessageContext } from './context';

export default (props) => {

const validateMessages = React.useContext(ValidateMessageContext);

return (

</FormProvider>

);

};

// 샘플 코드로, 실제 코드가 아닙니다

import { FormProvider } from 'rc-field-form';

const ConfigProvider = ({ validateMessages, children }) => {

const mergedValidateMessages = React.useMemo(

() => merge(antdDefaultValidateMessages, validateMessages),

[validateMessages],

);

return (

<SomeOtherProvider>{children}</SomeOtherProvider>

</FormProvider>

);

};

// 샘플 코드로, 실제 코드가 아닙니다

import { FormProvider } from 'rc-field-form';

const ConfigProvider = ({ validateMessages, children }) => {

let node = children;

if (validateMessages) {

node = <FormProvider validateMessages={merge(...)}>{node}</FormProvider>;

}

return node;

};

// 샘플 코드로, 실제 코드가 아닙니다

import { ValidateMessageContext } from '../form/context.ts';

const ConfigProvider = ({ validateMessages, children }) => {

const mergedValidateMessages = ...

return (

// 프록시 컨텍스트만 사용

<SomeOtherProvider>{children}</SomeOtherProvider>

</ValidateMessageContext>

);

};

// 샘플 코드로, 실제 코드가 아닙니다

import Form, { FormProvider } from 'rc-field-form';

import { ValidateMessageContext } from './context';

export default (props) => {

const validateMessages = React.useContext(ValidateMessageContext);

return (

</FormProvider>

);

};

Ant Design

Bundle Size Optimization

Ant Design

Bundle Size Optimization

ConfigProvider 그리고 rc-field-form

의존성 분해

결론

ConfigProvider 그리고 rc-field-form

의존성 분해

결론