what is main.js and main.js.map? and other stuff

问题

chunk {main} main.js, main.js.map (main) 24.5 kB [initial] [rendered]
块 {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
块 {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
块{styles}styles.js，styles.js.map（样式）12.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.02 MB [initial] [rendered]

谁能告诉我这些 js.map 文件是做什么的？ 我知道 main.js 包含所有源代码，但我不知道其他文件包含什么？

回答

所有这些文件都是由 JS 构建系统生成的，并且 JS 构建系统将尝试至少对代码进行一点压缩，以删除不必要的字符，例如注释和空格。此外，虽然这个特定过程将代码拆分为 5 个单独的 JS 源文件，但绝对是这样的，整个项目由更多的 JS 文件组成，这些文件都一起导入，然后在构建过程中组合。如果 main.js 中发生错误，我们的浏览器开发工具将提供一些令人难以置信的晦涩细节，很可能错误发生在第一行（共一行），并且该行可能包含数千个字符。我们怎么知道这个错误发生在我们预编译代码的哪个地方？

嗯，这就是所有 *.js.map 文件的用途。它们在开发环境中用于告诉我们的调试器我们的错误实际上来自哪里。您的内置浏览器开发工具应该自动检测 map 文件，当发生错误时，它们应该报告原始源文件中发生错误的位置，如果您进入调试器，您将能够看到原始行。在我们都使用带有前端框架的构建系统的这些日子里，您可以看到这对于开发是多么重要。

至于 polyfills.js、runtime.js、styles.js 和 vendor.js 是什么，它们是用构建系统专门配置的，所以很难确切地说出它们是什么（尽管它们的名字是很好的线索）。但基本上不同的源 JS 文件被编译成这些单独的构建文件，这取决于它们具体做什么。如果你想知道这样做的好处，请继续阅读。

Code splittin

根据 MDN，“代码拆分是将代码拆分为各种包或组件，然后可以按需或并行加载。”

换句话说，当您有不同的代码块时，您可以选择如何加载它们。当你只有一个大的包，我们会变得束手束脚。

但是代码拆分能给你带来什么？ 为什么有必要？

Performance

当您的应用程序被捆绑使用时，包含的不仅仅是您的应用程序代码。 该捆绑包还附带您的代码使用的所有第三方库。 这可以产生相当大的包大小！ 随着这个包的大小增加，加载它会变得昂贵。

假设每次用户加载页面时都必须下载所有这些代码。 页面可用之前可能需要相当长的时间。 这对用户来说不是很好的体验。

The solution

代码拆分允许您将整体包分解为各种较小的包。 然后，您可以并行加载包或实施延迟加载，延迟某些代码的下载，直到用户需要它。

Tools

实现代码拆分最常用的工具是 Webpack 和 Browserify。 但是，您可能在没有意识到的情况下实现了代码拆分行为。

Async

您可能习惯于在文件顶部编写如下所示的代码。

import MyScript from './my-script'

这包括主应用程序包中的 my-script。

然而，还有另一种方式。 假设您只需要该脚本在特定场景中运行。

function myFunction() {
  if (condition) {
    import(`./my-script`).then(() => {
      // do something here
    })
  }
}

上面的代码使用的是 Webpack 的导入功能，而不是浏览器或 Node.js 支持的动态导入。 它异步加载脚本，因此它不会阻止其余的代码，并返回一个 Promise。

通过这样做，my-script 中的代码成为不同包的一部分。 上面的代码片段正在执行代码拆分！