Webpack 网页包，是否需要在事件处理程序中或在文件的顶部位置设置模块？

我有了一个想法，

需要

模块的最佳方式是什么

我是指

require

语句的位置

下面是一个示例代码：

const movies = require('./movie').getMovies();
const App = () => {
  const handleClick = () => {
    const books = require('./book').getBooks();
    console.log(books);
    console.log(movies);
  };

  return (
    <div>
      <p>This is a App Component</p>
      <button type="button" onClick={handleClick}>按钮</button>
    </div>
  )
};

const movies=require（'./movie'）.getMovies（）；
常量应用=（）=>{
常量handleClick=（）=>{
const books=require（'./book'）.getBooks（）；
控制台。日志（书籍）；
console.log（电影）；
};
返回(
这是一个应用程序组件

按钮
)
};

显然，事件处理程序中的

require

可以节省一些性能。因为在您触发事件之前，

\uuuuuu webpack\uuu require（moduleId）

不会执行require语句将执行多次

将

require

语句放在文件顶部，当另一个文件需要它时，它将执行它将执行一次

那么，哪一个更好？ 也许我应该手动控制执行时间？

---

自己做一些缓存工作？

这是过早的优化。别担心那些东西。将require语句放在顶部，因为这样看起来更干净（至少对我来说：）。绝对不要做任何缓存，因为它已经由webpack完成了。@ArunaHerath感谢您的回答。webpack所做的缓存是什么意思？当一个模块需要时，它只需要计算一次。结果被缓存。这是ES6模块规范的一部分。我认为这也是CommonJS的一部分。