Create React App中解构导入依赖能否提升项目性能？

仅导入实际需要的依赖是否能提升应用性能？ #

不是绝对的，要看依赖本身的模块规范：

• 对遵循ES Module（ESM）规范、支持Tree Shaking（摇树优化）的依赖来说，只导入实际用到的内容能让构建工具移除未使用的死代码，直接减小JS产物体积，缩短资源加载、JS解析和执行时间，确实能带来性能提升。
• 对遵循CommonJS规范的依赖来说，模块导入是动态的，构建阶段没法做静态分析，不管你是全量导入后调用方法，还是写解构赋值拿部分方法，本质都会加载整个依赖包，不会有优化效果。
  补充：你示例里用的React 18本身是原生ESM输出、支持Tree Shaking的，正常配置下就算你写全量导入import React from 'react'，只要代码里没用到的React API，最终都不会被打进生产包，和解构导入的效果没有区别。

优化效果是否依赖特定webpack配置？ #

这个说法完全属实，Tree Shaking不是开箱就100%生效的，需要满足几个配置条件：

• webpack必须运行在production生产模式，开发模式默认不会做死代码移除，优先保证构建速度和调试体验。
• 构建链路里的babel等转译工具不能把ESM模块转成CommonJS格式，一旦ESM的静态导入导出被转成CommonJS的动态require，webpack就没法分析模块的使用情况，Tree Shaking直接失效。
• 对应依赖的package.json里需要正确声明sideEffects字段，要么标记false说明包内文件都没有副作用（即模块导入不会执行除导出内容外的全局修改逻辑），要么准确列出有副作用的文件路径，webpack才敢安全删除未被使用的导出内容，避免误删代码导致运行报错。

create-react-app是否默认集成了对应配置？ #

CRA默认已经把相关配置配好了，不需要手动修改：

• CRA的生产构建命令默认开启production模式，Tree Shaking相关逻辑默认启用。
• CRA内置的babel配置默认保留ESM模块规范，不会转成CommonJS，不影响webpack做静态分析。
• 对React、ReactDOM这类官方适配了Tree Shaking的依赖，CRA的生产构建能正常完成死代码移除。
  注意：如果用了不支持Tree Shaking的第三方库（比如很多久未更新的旧版UI库、工具库），就算你写解构导入，CRA也没法摇掉未使用的代码，这时候要么手动从单文件路径导入需要的内容，要么搭配对应库的按需导入babel插件才能拿到体积优化效果。

如何测试按需导入带来的性能提升幅度？ #

按下面的方法测试，结果不会有太大偏差：

• 先固定测试基准：两次测试除了导入写法不同，其余业务代码、依赖版本、构建配置完全一致，每次构建前清空构建缓存，避免缓存影响结果。
• 构建产物体积对比：执行生产构建命令（CRA下是npm run build），构建完成后终端会直接输出每个chunk的原始体积、gzip压缩后体积，对比两次构建的主chunk体积差，就是最直观的体积优化幅度。如果需要看更细粒度的依赖占比，可以用构建产物分析工具查看每个模块被打入包的体积，确认哪些未使用的代码被移除了。
• 运行时性能对比：打开浏览器无痕模式（避免插件注入脚本干扰），用开发者工具的Performance面板分别录制两次页面从加载到首屏可交互的全流程，对比JS总执行时长、首屏渲染时间、长任务数量的差异，就能得到运行时的性能提升数据。

两种导入写法示例 #

全量导入命名空间写法

import React from "react";
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.Fragment>
    <h1>Hello</h1>
  </React.Fragment>
);

解构导入所需内容写法

import { Fragment } from "react";
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <Fragment>
    <h1>Hello</h1>
  </Fragment>
);

补充提示：在CRA默认的生产构建配置下，上面两种写法最终的React相关产物体积几乎没有差异，只有当依赖本身不支持Tree Shaking时，两种写法才会出现明显的体积差。

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