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 是用来做什么的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。