create-react-app 创建的项目中实现组件按需加载如下图，通过查看 create-react-app 脚手架

通过babel-plugin-import 实现

如下图，通过查看 create-react-app 脚手架源码得知，react-scripts 中的 webpack 禁用了修改 babel 配置的功能。

也就说通过在根目录新建 .babelrc 文件修改 babel 配置不起作用。可通过重写 create-react-app 中的 webpack 配置实现，步骤如下：

执行 npm i babel-plugin-import -D 安装 babel 插件；
执行 npm i react-app-rewired customize-cra -D 安装重写 webpack 配置插件；

根目录新建 config-overrides.js 文件，这里使用的 react 组件库是 @jdcfe/yep-react，代码如下：

const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "@jdcfe/yep-react", // 组件库名称
    libraryDirectory: "es", // 组件库路径
    style: "css", // 会加载 css 文件，设置为 true 会加载 scss 文件，则必须引入sass-loader
  })
);

修改 package.json 文件中的 scripts 命令如下：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

在项目中引用 Button 组件

import { Button } from '@jdcfe/yep-react';

执行 npm run build，就会在 babel 中编译成：

import { Button } from '@jdcfe/yep-react/es/Button';
require('@jdcfe/yep-react/es/Button/style');

注意：使用此方式要求转换的组件库中的组件对应的样式文件需要放在 style 文件夹下，否则会报错，如下：

Cannot find module: '@jdcfe/yep-react/es/button/style'. Make sure this package is installed.

You can install this package by running: npm install @jdcfe/yep-react/es/button/style.

组件库支持 tree shaking

什么是 tree shaking？ AST 对 JS 代码进行语法分析后得出的语法树 (Abstract Syntax Tree)。AST 语法树可以把一段 JS 代码的每一个语句都转化为树中的一个节点。DCE Dead Code Elimination，在保持代码运行结果不变的前提下，去除无用的代码。

webpack 4x 中已经使用了 tree shaking 技术，通过在组件库 package.json 文件中配置参数 "sideEffects": false，来告诉 webpack 打包的时候可以大胆的去掉没有用到的模块。这时用户在项目中使用组件库的时候不需要做任何处理，就可以按需引用 JS 资源了。但 sideEffects 配置成 false 会导致组件的样式引用不到，原因是引入 css 样式的代码：import './dist/index.css'，相当于只是引入了样式，并不像其他 JS 模块后面做了调用，在 tree shaking 的时候，会把 css 样式去掉。所以配置 sideEffects 就要把 css 文件排除掉：

"sideEffects": [
  "dist/index.css"
]

通过此种 tree shaking 的方法，可以实现组件库的按需加载功能，打包的文件去除了没用到的组件代码，同时省去了用户的配置。