使用NPM安装依赖库还是从CDN导入？React教程相关实践疑问

你之前的认知没有问题，CDN在jQuery、Bootstrap这类偏原生、逻辑简单的前端项目里确实效率更高，但是React生态的开发模式和传统原生开发有本质区别，优先用npm安装主要有几个核心原因：

• 模块化开发与按需打包的需求。现在React项目基本都采用ES Module模块化开发规范，Redux、Material UI、Firebase这类库本身也拆分为多个独立子模块，用npm安装后配合Vite、Webpack这类打包工具，可以实现tree shaking能力，只打包你实际用到的代码片段，最终产物体积往往比引入全量CDN包小很多。比如你用Material UI只用到Button和Input两个组件，npm安装后打包只会把这两个组件的相关代码打入产物，CDN引入则需要拉取整个MUI的全量包，加载速度反而更慢。
• 版本与协作可控。npm的package.json文件会清晰记录所有依赖的固定版本号，不管是自己后续维护项目还是多人协作，所有人安装的依赖版本完全一致，不会出现不同开发人员引入不同版本CDN包导致的代码兼容问题。同时配合VS Code的代码提示能力，npm安装的包默认携带类型声明文件，开发时可以实现自动补全、语法错误实时提示，开发效率远高于CDN引入的全局变量模式。
• 生态适配性更高。React生态的大量工具、插件本身就是为模块化开发设计的，很多库没有提供CDN版本，或是CDN版本功能受限。比如新版Firebase的SDK用npm安装可以按需引入认证、云存储等单个功能模块，CDN版本只能引入全量包，很多高级配置也无法正常调用。

新手第一次使用npm安装包的注意事项 #

• 先在本地安装Node.js，安装完成后在VS Code终端执行node -v、npm -v两个命令，能正常输出版本号即表示环境配置成功
• 新建React项目不需要手动逐个安装React、Redux等基础依赖，直接用官方脚手架npm create vite@latest按照提示选择React相关模板即可，脚手架会自动完成基础依赖的安装和项目配置，后续需要新增依赖（比如Material UI、Firebase）再执行npm install 对应库名命令即可
• 如果是做小型测试Demo，完全可以继续用CDN引入React开发，教程统一要求用npm安装是为了贴合实际生产项目的标准开发流程

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