create-react-app(CRA)生产构建时是否会移除模块中未使用的代码？

1. CRA生产构建默认是否会移除未使用的依赖代码 #

CRA从v2版本开始，生产环境构建默认开启*Tree Shaking（摇树优化）*能力，底层依托webpack的静态模块分析机制，可以自动移除ES模块规范（即使用import/export语法）下未被引用的无效代码。

2. 仅使用模块部分功能时能否裁剪冗余代码 #

该能力是否生效取决于你引入的依赖模块的规范：

• 若依赖是ES模块规范（可查看依赖的package.json是否存在module字段，或导出逻辑使用的是export而非module.exports），则CRA默认构建流程会自动裁剪未使用的代码，哪怕原模块体积为1MB，最终打包只会保留你实际用到的代码片段。
• 若依赖是CommonJS规范（使用require/module.exports进行导入导出），webpack默认无法对其做静态分析，无法自动裁剪，整个模块都会被打入最终构建产物中。

3. 默认能力不满足时的实现方案 #

如果遇到无法自动裁剪的情况，可以通过以下方式处理：

• 优先替换ES模块版本的依赖：优先选择提供ES模块构建产物的第三方依赖，从根源上支持摇树优化。
• 手动按需引入子模块：比如使用lodash时，不要全量引入import _ from 'lodash'，改成按需引入对应功能import debounce from 'lodash/debounce'，即可避免引入冗余代码。
• 扩展Babel插件：如果需要对CommonJS模块做摇树，可以先执行npm run eject暴露CRA的内置配置，添加babel-plugin-transform-commonjs-es2015-modules这类插件，将CommonJS模块转为ES模块后再做摇树处理。
• 自定义构建配置：不想执行eject的话，可以使用craco、react-app-rewired这类工具覆盖CRA的默认构建配置，额外添加摇树、代码分割相关的规则。
• 构建后校验：可以用source-map-explorer工具分析最终构建产物的体积组成，确认冗余代码是否已经被成功移除。

内容的提问来源于stack exchange，提问作者Batuhan Isildak