JavaScript ES6 加载文件机制

Question

我正在开发一个使用 WebPack 和 Express 服务器的 JavaScript 和 React 应用程序。我实际上对加载文件机制有疑问。

我还没有找到答案。那么我就开始吧。

假设我有一个 app.js 文件，该文件执行类似 从 someJSONfile 导入任何内容 的操作，其中我从前端的 JSON 文件导入一些内容。

这是我的问题，每当我执行 app.js 文件时，内容无论都会每次加载到内存中吗？或者它只是第一次加载，接下来的执行 webpack 或任何责任者，将搜索该文件的内容而不再次加载它？

我只是担心每次执行 app.js 时，里面的文件(例如示例中的 JSON)每次都会再次加载。

谢谢，我希望我说得足够清楚

Answer 1

Webpack 足够智能，可以缓存加载的模块(事实上，在 bundler 内部，无论您导入多少次，它都会加载一次)。

看这个例子:

file1.js

import json from './data.json'
export default json

file2.js

import json from './data.json'
export default json

ma​​in.js

import json1 from './file1.js'
import json2 from './file2.js'

console.log(json1 === json2); //true (same reference)