Vue.js2.0 independent build and run-time build

Transferred from: Https://jingsam.github.io/2016/10/23/standalone-vs-runtime-only-build-in-vuejs2.html?utm_source=tuicool &utm_medium=referral

When using Vue.js 2.0, there are two versions of standalone build (standalone) and run-time build (runtime-only) to choose from. In Vue.js 1.0, however, there is no such version difference. Which version should I use? It makes me feel a little confused. In the spirit of knowing its reason, I decided to study the difference between the two.

That's what Vue.js's official tutorial says:

• Standalone builds include compiling and supporting template options. It also relies on the presence of the browser's interface, so you can't use it to render to the server side.
• Run-time builds do not include template compilation, and templates options are not supported. The runtime builds, which can be used with the render option, but it only works in the single-file component, because the template for the single-file component is precompiled to the render function at build time, and the runtime builds only 30% of the size of the standalone build, with only 16Kb min+gzip size.

For a long while, I really did not know the difference between the two. After a search, finally figuring out the source of the problem, and listen to me to explain.

The vue.js process actually consists of two steps. In the first step, the compiler compiles the string template into a render function (render), which is called the compilation process, and the second step, the runtime actually calls the compiled render function, called the run process.

Because the compilation process of Vue.js 1.0 relies on the DOM of the browser, it is impossible (or meaningless) to separate the compiler from the runtime. So in the Vue.js 1.0 bundle, the compiler and runtime are packaged together and executed on the browser side.

However, to Vue.js 2.0, in order to support server-side rendering (server-side rendering), the compiler cannot rely on the DOM, so the compiler and runtime must be separated. This forms a standalone build (compiler + Runtime) and runtime build (runtime only). It is obvious that the run-time build is smaller than the standalone build.

In modern front-end engineering builds, templates are typically precompiled using Vue-loader and vueify. In this case, you only need to package the runtime without having to package the compiler, and the runtime builds to meet your needs. Of course, if you need to compile the template in real time using the options on the front end template , you still need to use a standalone build to send the compiler to the browser.

Vue.js2.0 independent build and run-time build