Where is the scaffolding tool Vite in Vue3? Know all about it

Vue is a progressive framework for building user interfaces. Unlike other large-scale JS frameworks, Vue is designed to be applied layer by layer from the bottom to the top, making it easier to use, and easy to integrate with third-party libraries or existing projects. Therefore, Vue It is fully capable of providing drivers for complex single-page applications.

With the official release of Vue.js 3.0, this excellent front-end development framework ushered in a lightweight environment construction tool-Vite. Vite is a web development and construction tool driven by native ESM. It is developed based on the browser's native ES imports in the development environment, and packaged based on Rollup in the production environment.

Today, let's get to know this new member together.

Features of Vite:

Compared with Webpack, Vite has the following characteristics:

• Fast cold start, no need to wait for packaging
• Instant hot module update
• Real on-demand compilation, without waiting for the compilation of the entire project

Since the concept of packaging is completely skipped, the emergence of Vite has greatly shaken the position of Webpack, and it has truly made the server ready to use. It seems that even You Dashen can't escape the "true fragrance" theory.

Vite's background and working methods

In the past, when Webpack, Rollup and other build tools were used as home stars, Vue's code was written based on the ES Module specification. A huge dependency graph can be perfectly built between files through the bridge of import and export. These tools will pre-package the modules into a browser-readable js bundle format when performing local debugging. In order to optimize this process, lazy loading appears, but lazy loading does not solve the problem of construction. Webpack still needs to build the modules needed for asynchronous routing in advance.

As our project grows larger, the speed of project launch will also become slower and slower.

Vite avoids this point. It conforms to the trend of the times and inherits the advantages of many predecessors. For example, Svelte or Snowpack that has basically compiled the framework, these tools can use modern JavaScript functions (such as ES modules) to provide a smoother and faster development experience, almost no configuration, and no need to rely on too much Install the software package. Vite can directly use the browser's native ES module to build the development environment, and directly abandon the bundling step, such as directly writing such code in the html file:

// index.html

createApp(Main).mount(’#app’)

Regardless of the size of our application, HMR can be updated steadily and quickly. When bundling production, Vite comes with a pre-configured build command that can immediately perform many performance optimizations. In addition, Vite can also provide hot module replacement, which means that we can see the code refresh in the browser during the development process, and can even use it to compile a streamlined version of the project and use it directly in production. By using it, we can quickly start a Vue or React project without using Vue CLI or Create React App. Efficient and fast are synonymous with it.

The interesting thing is: the name "Vite" comes from the French word "fast", pronounced "vit".

How to use vite

Like common development tools, vite provides a way to build a project structure with npm or yarn, and execute it on the terminal using yarn:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

You can initialize a vite project (the default application template is vue3.x), and the generated project structure is very simple:

|____node_modules
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json执行 yarn dev 即可启动应用 。

vite start link

Command parsing

This part of the code is in src/node/cli.ts. The main content is to use minimist-a lightweight command parsing tool to parse npm scripts. The parsed function is resolveOptions. The simplified code snippet is as follows.

function resolveOptions() {
    // command 可以是 dev/build/optimize
    if (argv._[0]) {
        argv.command = argv._[0];
    }
    return argv;
}

After getting the options, it will be judged according to the value of options.command to execute the runServe command needed in the development environment or the runBuild command needed in the production environment.

if (!options.command || options.command === 'serve') {
    runServe(options)
 } else if (options.command === 'build') {
    runBuild(options)
 } else if (options.command === 'optimize') {
    runOptimize(options)
 }

In the runServe method, execute the method of creating a development server for the server module, and execute the method of building the build module in runBuild. The latest version also adds support for the optimize command.

The role of Vite

remove the packaging step

The concept of packaging is that the developer uses the packaging tool to gather the various modules of the application together to form a bundle, and read the code of the module with certain rules-in order to use it in a browser that does not support modularization.

In order to load each module in the browser, the packaging tool uses glue code to assemble each module. For example, webpack uses map to store the module id and path, and uses the webpack_require method to obtain the module export.

Vite makes use of the browser's native support for modular importing, omitting the assembly of modules and no need to generate bundles, so the packaging step can be omitted.

realizes on-demand packaging

Packaging tools such as webpack will pack each module into the bundle in advance, but the packaging process is static-regardless of whether the code of a certain module is executed or not, the module must be packaged into the bundle. The disadvantage is that After the project is getting bigger and bigger, the packaged bundle is getting bigger and bigger.

In order to reduce the bundle size, developers will use dynamic import() to load modules asynchronously (imported modules still need to be packaged in advance), or use tree shaking to try their best to remove unreferenced modules, but these methods are not as good as The elegance of vite, vite can only dynamically (with import()) introduce a module when it is needed, without pre-packaging, although it can only be used in the development environment, but this is enough.

How does vite handle ESM

Vite uses the ES module in the browser to obtain modules using http requests, so vite must provide a web server to proxy these modules. Koa mentioned above is responsible for this. Vite obtains the content of resources by hijacking the request path Return to the browser, but vite does a special treatment for module import.

Developer experience

In the past development experience, whether we are using Grunt, Gulp, Rollup or Webpack, such large and complex projects will take a lot of time to debug and ensure that all tools and plug-ins can run normally. After that, more time will be spent on fixing errors, and improving the bundle can optimize and shorten its build time.

In contrast, Vite can do it easily. The tester tried to set up four stacks and made some custom settings on them almost immediately. Vite eliminates the binding of the two tools and plug-ins, and adds a lot of friendly default settings, and you can even skip the configuration and start working directly.

If we have specific needs, Vite allows us to set up by ourselves, which can cover the configuration of Rollup and various Rollup plugins.

The more tools that are bound to a project, the more fragile the overall will be. If a component fails or a major change is introduced, the entire process will be interrupted. We must once again deeply study each tool and plug-in and its complexity to fix it. Vite fundamentally reduces the burden of development.

to sum up

All in all, Vite is a complement to recent trends in simplifying tools such as Parcel and Snowpack. Its streamlined settings are almost plug-in.

If we want to use a front-end framework, we might choose Nuxt, Next.js, SvelteKit/Sapper or similar products. These tools not only simplify the tools and speed up the development speed, but also add many plug-ins that may be required by complex applications, which is very convenient and easy to use.

And if we want to avoid using frameworks, but need to reduce scripts and styles, Vite will become the tool of choice.

Further reading

If you are curious what magic power does Vite have? Let us actually build a based on Vue 3 components and experience it for yourself.

• Pure front-end table control SpreadJS supporting Vue framework