前言

發(fā)現(xiàn)有不少粉絲還傻傻分不清楚什么是編譯時(shí)？什么是運(yùn)行時(shí)？這篇文章我們來讓你徹底搞清楚編譯時(shí)和運(yùn)行時(shí)的區(qū)別。

編譯時(shí)

我將編譯這個(gè)詞語理解為翻譯，這句話是什么意思呢？

比如你要和一個(gè)老外溝通，你的英文超級(jí)爛。所以你說的是中文，老外卻只理解英文。那你們兩個(gè)人怎么溝通呢？所以你需要一個(gè)翻譯器來將你說的中文轉(zhuǎn)換為英文，這樣老外就能理解你說的話了，這個(gè)翻譯過程就是我們常說的編譯時(shí)。

看完上一個(gè)例子如果你還沒理解的話，我們再來看一個(gè)vue的例子。我們平時(shí)寫vue代碼時(shí)一般都是寫在文件后綴名為.vue文件中，也就是官方說的單文件組件 (SFC)。

但是瀏覽器認(rèn)識(shí)后綴為.vue的單文件組件 (SFC)嗎？

很明顯瀏覽器是不認(rèn)識(shí)的，所以這個(gè)時(shí)候需要將后綴為.vue的單文件組件 (SFC)編譯（翻譯）為瀏覽器認(rèn)識(shí)的js文件，這一過程就是我們常說的編譯時(shí)。

在前端中，一般來說編譯時(shí)就是代碼跑在node.js的階段。

大家都知道前端主要分為兩個(gè)環(huán)境：生產(chǎn)環(huán)境和開發(fā)環(huán)境。

• 對(duì)于生產(chǎn)環(huán)境來說，編譯時(shí)就是在執(zhí)行類似yarn build之類的命令，將源代碼打包成瀏覽器可直接執(zhí)行的代碼這一過程。打包生成的代碼文件是存在磁盤中，這一過程是在node.js中完成的。

• 對(duì)于開發(fā)環(huán)境來說，編譯時(shí)就是在執(zhí)行類型yarn dev這種啟動(dòng)命令，同樣將源代碼編譯成瀏覽器可直接執(zhí)行的代碼這一過程。和生產(chǎn)環(huán)境不同的是生成的代碼文件是存在內(nèi)存中，并不會(huì)寫到磁盤中，同樣這一過程是在node.js中完成的。

運(yùn)行時(shí)

還是以vue舉例，大家都知道瀏覽器的渲染過程是將一個(gè)html文件渲染到頁面上的。在SPA單頁面中瀏覽器接收到的index.html一般是下面這樣的，如下圖：

從上圖中可以看到接收到的html文件中只有一個(gè)<div id="app"></div>，那么瀏覽器又是怎么從這個(gè)空div渲染成豐富多彩的頁面呢？

熟悉vue源碼的同學(xué)應(yīng)該比較清楚，首先是生成一個(gè)app對(duì)象，然后調(diào)用app對(duì)象的mount方法將經(jīng)過編譯時(shí)處理后拿到的vue組件對(duì)象掛載到<div id="app"></div>上面。這一過程就是所謂的運(yùn)行時(shí)。

對(duì)于前端來說，運(yùn)行時(shí)就是代碼執(zhí)行在瀏覽器的階段。

在瀏覽器中編譯

看到這里有的小伙伴會(huì)有疑惑了，vue好像還提供了一種全局構(gòu)建的版本。在這個(gè)版本中我們可以直接在html文件中使用vue，無需使用webpack或者vite這種打包工具打包。比如下面這樣：

從上圖中可以看到，這種用法中除了將*.vue文件名替換為*.html文件名之外，其他的寫法基本是一模一樣的。在這種用法中由于沒有使用到構(gòu)建工具webpack或者vite，當(dāng)然就沒有在node.js中執(zhí)行的編譯時(shí)，那么這種用法中瀏覽器又是如何識(shí)別單文件組件 (SFC)中的<template>、<script> 和 <style>等模塊呢？

答案是在這種全局構(gòu)建版本的vue中會(huì)內(nèi)置一個(gè)編譯器。在瀏覽器中運(yùn)行時(shí)如果發(fā)現(xiàn)了<template>模塊的代碼就會(huì)使用內(nèi)置的編譯器將這些模塊編譯成瀏覽器可執(zhí)行的代碼。

所以我們前面才會(huì)講：一般來說編譯時(shí)就是代碼跑在node.js的階段。不一般的情況就是現(xiàn)在這種情況，vue直接內(nèi)置了一個(gè)編譯器，在瀏覽器中進(jìn)行編譯。但是話說回來，這種在瀏覽器中編譯的模式，性能肯定不如使用構(gòu)建工具webpack或者vite提前將資源進(jìn)行打包。

總結(jié)

一般情況下編譯時(shí)就是代碼跑在node.js的階段，比如執(zhí)行yarn dev或者yarn build時(shí)代碼在node.js中執(zhí)行的階段。后面我們又講了運(yùn)行時(shí)實(shí)際就是代碼在瀏覽器中執(zhí)行的階段。

最后我們又講了還有一種特殊的情況，像全局構(gòu)建版本的vue中會(huì)內(nèi)置一個(gè)編譯器。讓我們可以脫離webpack或者vite使用vue，這種情況就是在瀏覽器中進(jìn)行編譯的模式，當(dāng)然這種模式的性能肯定不如使用構(gòu)建工具webpack或者vite提前將資源進(jìn)行打包