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 中的代码成为不同包的一部分。上面的代码片段正在执行代码拆分！

Angular 开发里的 polyfills.js、runtime.js、styles.js 和 vendor.js 是用来做什么的相关推荐

解决HbuiderX将uni-app开发的项目运行到小程序编译后文件vendor.js太大的问题
分包分包分包!!!!! 直接略过网上一下简单操作如勾选运行时是否压缩代码,感觉并没有什么用! 众所周知,h5上运行正常的代码,犹豫兼容的原因,在编译为小程序后会出现种种问题.解决报错问题请转到链接[b ...
Angular 应用里的 vendor.js 是用来干什么的？
What is vendor file in angular? 以 SAP 电商云 UI 的 Angular 页面为例,这个 vendor.js 有超过 17 万行代码: 此文件包含导入您的应用程序 ...
Android开发笔记（六十四）网页加载与JS调用
内置浏览器网页视图WebView 如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app中,省去了app重画页面与http通信的事情,无疑是更经济的做法.WebView就是A ...
游戏开发的HelloWorld,快速入门，新手上路，使用CocosCreator+JS,flyBird(飞翔小鸟）
游戏开发的HelloWorld,快速入门,新手上路,使用CocosCreator+JS,flyBird(飞翔小鸟) 介绍开发环境游戏原理文件结构详细操作全部代码介绍拓展什么的都没有,真正 ...
以太坊智能合约开发，Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
图形化开发（一）——Three.js基本介绍-优缺点-在线编辑器 Babylon.JS是最好的JavaScript3D游戏引擎
图形化开发(一)--Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎课程主要学习目标 Threejs ( 3d ) D3 (做数 ...
vue.js组件的练习_由Vue.js开发的电阻器颜色练习网站
vue.js组件的练习 ResisColor (ResisColor) ⚡ A resistor color practice website develop by Vue.js. ⚡电阻器颜色练习网 ...
解决微信小程序开发vendor.js文件超过500kb问题
解决办法: 目前查找到有两种解决办法 1.开发环境启用代码压缩.2.vendor.js的分包处理,目前第一种已经达到预期,仅记录下第一种方式. 1.开发环境启用代码压缩在build/webpack. ...
在微信里打开网页，video视频出现问题，video.js插件解决
在调试的过程中,发现电脑端,手机端在谷歌中打开是没有问题的.但是在微信里打开页面出现问题. 分析:微信自带的内嵌浏览器是X5内核,而谷歌的内核是Webkit,video在X5内核里有兼容性的问题. 通 ...

Angular 开发里的 polyfills.js、runtime.js、styles.js 和 vendor.js 是用来做什么的

问题

回答