preface
I found that many fans are still stupid and don't know what is compilation time? What is a runtime? In this article, we're going to give you a thorough understanding of the difference between compile-time and runtime.
Compilation
I understand the word compilation as translation, but what does that mean?
For example, if you want to communicate with a foreigner, your English is super bad. So you speak Chinese, but foreigners only understand English. So how do you two communicate? So you need a translator to convert what you say from Chinese to English, so that foreigners can understand what you say, and this translation process is what we often call compilation.
translate
After reading the previous example, if you still don't understand, let's take a look at another VUE example. When we usually write vue code, we usually write it in a file with the file suffix .vue, which is officially called a single file component (SFC).
But do browsers recognize single-file components (SFCs) with the .vue suffix?
Obviously, browsers don't know it, so at this time, you need to compile (translate) the single-file component (SFC) with the suffix .vue into a js file that the browser knows, and this process is what we often call compilation.
In the front-end, generally speaking, compilation time is the stage where the code runs at the node.js.
As we all know, the front-end is divided into two main environments: the production environment and the development environment.
- In the case of a production environment, compilation time is the process of executing commands such as yarn build and packaging the source code into code that can be executed directly by the browser. The generated code files are stored on disk, and this process is done in the node.js.
- For the development environment, compilation time is the process of executing a startup command of type yarn dev, and compiling the source code into code that can be executed directly by the browser. Unlike the production environment, the generated code files are stored in memory and are not written to disk, and this process is also done in the node.js.
Runtime
Again, in the case of Vue, we all know that the rendering process of the browser is to render an HTML file onto the page. The index.html received by the browser in the SPA single page is generally as follows, as shown in the following figure:
As you can see from the image above, there is only one > <div id="app" in the received html file</div>, so how does the browser render a colorful page from this empty div?
Students who are familiar with the VUE source code should know that the first thing is to generate an app object, and then call the mount method of the app object to mount the VUE component object obtained after compilation-time processing to <div id="app" ></div>. This process is known as the runtime.
For the front-end, the runtime is the stage where the code is executed in the browser.
Compile in the browser
Seeing that some of you here will be confused, vue seems to also provide a globally built version. In this version, we can use Vue directly in the HTML file, instead of using packaging tools like Webpack or Vite. For example, it looks like this:
As you can see from the image above, except for replacing the *.vue file name with the *.html file name, the other writing methods are basically the same. In this case, since the build tools webpack or vite are not used, and of course there is no compilation time executed in the node.js, how does the browser recognize<template><script> <style>modules such as and in a single-file component (SFC) in this usage?
The answer is that there is a compiler built into this global build of Vue. When running in the browser, if you find <template>code for modules, you use the built-in compiler to compile those modules into executable code for the browser.
That's why we've talked about it earlier: generally speaking, compilation time is the stage where the code runs at the node.js. This is not the case now, and Vue has a built-in compiler that compiles in the browser. But then again, this mode of compiling in the browser is certainly not as good as using the build tools webpack or vite to package the resources in advance.
summary
In general, compilation time is the stage where the code runs in the node.js, such as the stage where the code is executed in the node.js when yarn dev or yarn build is executed. Later, we talked about the runtime, which is actually the stage where the code is executed in the browser.
Finally, we talked about a special case where a global build of Vue has a built-in compiler. We can use Vue away from webpack or vite, which is the mode of compiling in the browser, of course, the performance of this mode is certainly not as good as using the build tool webpack or vite to package the resources in advance