next.js 中的附加 JavaScript 标记答案

【问题标题】：Additional JavaScript tags in next.jsnext.js 中的附加 JavaScript 标记
【发布时间】：2021-07-28 17:08:43
【问题描述】：

我最近开始使用 react 和 next.js 进行编程（之前我使用的是 node.js）
我做了我的第一个应用程序，但是在检查页面时我看到了很多额外的 JavaScript（如下图）

这是我的目录：

这是我的 index.js 源代码：

export default function Home() {
  return (
    <div>
      hello world
      </div>
  )
}

这就是我所说的附加 JavaScript 的意思

由于我一直在使用 node.js，所以我对所有这些自动放入代码中的 JavaScript 不是很熟悉，
有人可以解释一下这一切是什么，它来自哪里以及为什么它是必要的？

【问题讨论】：

一个 JavaScript 捆绑器正在执行此操作，这让您只加载必要的代码，而不是一次加载所有 40MB 的 JavaScript。

标签： javascript html reactjs next.js

【解决方案1】：

next.js 或 react.js 是用于创建单页应用程序的库，您现在不需要手动编写 html，一切都将使用 javscript 生成。这些文件只是 webpack 工具分块生成的内部库脚本文件，你可能会想，为什么会这样，就像我们也可以将这些所有脚本存储到一个文件中，但实际上 webpack 将模块分成块，这样它只会在需要时加载这些文件以优化网络性能。

【讨论】：

我还没有足够的知识来理解你刚才所说的一切，但据我所知，你说的是不是单独加载每个页面（使用传统的 html 和 javascript）只有一页是与所有组件一起发送并提高组件的效率，正在编写“附加 javascript”，我在检查时看到，对吗？
是的，附加的 javascript 是来自框架和现代开发工具的代码，可帮助您构建单页应用程序。并且您处于开发模式，当您构建项目时，您只会得到两个文件 index.html 和 script.js（缩小并合并）。 webpack 配置中还有很多选项，可以将代码分成块，即 script.js 将被分成块。希望这能回答你的问题。如果您想了解更多信息，请查看 Virtual Dom 概念，并阅读一些关于 webpack 的内容。