Vue、React等JS框架中是否有类似PHP include_once的机制？

在JavaScript生态里，模块系统本身就内置了类似PHP include_once的重复引入避免机制，不管是Vue、React还是其他主流框架，都依赖这个底层能力来避免重复加载模块。

核心模块机制的缓存逻辑 #

JavaScript的模块系统分为两种，都自带缓存：

• CommonJS（Node.js传统模块）：通过require()加载模块时，第一次执行模块代码后会把导出结果存入require.cache对象。后续再次require同一个模块时，直接读取缓存里的结果，不会重新执行模块代码。
• ES模块（ESM，现代浏览器/Node.js标准）：使用import语法加载模块时，模块会被解析执行一次，之后所有对该模块的import都会复用已缓存的导出内容，不会重复执行模块逻辑。

Vue、React中的具体表现 #

• Vue：不管是Vue 2还是Vue 3，都基于ESM或CommonJS模块系统构建。你在多个组件中import同一个工具函数、第三方库甚至自定义组件，模块只会被加载执行一次。此外，Vite、Webpack这类打包工具还会对Vue项目做Tree Shaking、公共模块提取等优化，进一步消除重复代码。
• React：同样依赖标准模块系统，多次import React或者同一个自定义组件，都只会触发一次模块加载。打包阶段，Webpack的splitChunks插件、Rollup的代码分割功能会自动提取公共依赖，避免重复打包到多个输出文件中。

关于“新JS框架忽视性能”的质疑 #

这种说法并不成立：

• 新框架不仅没有忽视性能，反而在模块处理和打包优化上做了大量工作，比如Vite利用ESM的原生加载能力实现按需编译，大幅提升开发阶段的性能。
• 模块缓存是JS模块系统的标准特性，所有主流框架都严格遵循这个标准，不存在“忽视”的情况。
• 框架本身的运行时优化（比如React并发渲染、Vue 3的响应式重构）也都是围绕性能提升展开的。

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