Intensive reading "Comparison of a new generation of front-end construction tools"

The intensive article this week is Comparing the New Generation of Build Tools .

Many new tools have been released in the field of front-end engineering recently. These new tools have used some new technologies or cross-field technologies to achieve some breakthroughs. Therefore, it is necessary to understand the characteristics of these tools and whether they can be put into production environment.

Since the original text is rather verbose, the specific usage and support details are not expanded here. If you want to know more about the details, you can directly read original text ).

intensive reading

According to the encapsulation granularity from the bottom to the top, it is introduced in the order of esbuild, snowpack, vite, and wmr.

esbuild

esbuild is written in go language. Because it is more low-level than node and does not provide AST operation capabilities, the code execution efficiency is higher. According to its official benchmark, the speed is 10-100 times:

<img width=400 src="https://img.alicdn.com/imgextra/i1/O1CN01hzHuDP1JXuBvRgX7x_!!6000000001039-2-tps-800-170.png">

esbuild has two major functions, namely bundler and minifier. Bundler is used for code compilation, similar to babel-loader and ts-loader; minifier is used for code compression, similar to terser.

Use esbuild to compile the code as follows:

esbuild.build({
  entryPoints: ["src/app.jsx"],
  outdir: "dist",
  define: { "process.env.NODE_ENV": '"production"' },
  watch: true,
});

However, because esbuild cannot operate AST, some babel plug-ins that need to operate AST are not compatible with it. As a result, esbuild's bundler module is rarely used directly in the production environment.

Fortunately, the minifier module can be used directly instead of terser and can be used in a production environment:

esbuild.transform(code, {
  minify: true,
});

Since esbuild sacrifices some package size in exchange for higher execution efficiency, the package size will be slightly larger after compression, but the difference between 177KB and 165KB is almost negligible.

esbuild is relatively low-level, so it can be used in conjunction with the upper-level build tools introduced later. Of course, according to the tool design concept, whether it is built-in, how built-in, and whether it is allowed to be replaced by plug-ins is another matter.

snowpack

Snowpack is a relatively lightweight bundles solution. I also wrote a intensive reading snowpack 160a1ce3018ba4 . In fact, bundles use the ESM import feature supported by the browser to use the browser for inter-module dependency loading without compiling. get on.

By skipping the dependency loading during compilation, you can save a lot of things. For example, you don’t need to consider tree shaking, and you don’t need to use caching for the acceleration of the final product. This is equivalent to the final execution of the browser, and the browser is the final runtime container. Know more about how to load on demand than compile-time tools.

From the perspective of compiling time only, the compilation speed of modifying a single file is related to the overall size of the project, and if the overall project is not considered, only a single file is compiled (recursively at most limited dependent modules to solve the problem of judging TS type variables) time complexity It must be O(1).

In fact, we rarely use snowpack alone, because the esbuild used for compilation has not yet reached the 1.0 stable version, and there are risks in ecological compatibility and product stability, so rollup or webpack is often used when compiling and packaging, but this fragmentation also leads to The development and production environments are inconsistent, which often represents a greater risk, so you can see this trade-off in the vite framework.

snowpack is available out of the box:

// package.json
"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build"
},

We can also add snowpack.config.js configuration file to enable remote mode:

// snowpack.config.js
module.exports = {
  packageOptions: {
    "source": "remote",
  }
};

remote mode is Streaming Imports , that is, there is no need to install the corresponding npm package locally. Snowpack automatically skypack and caches them.

Snowpack seems to be more of a pure attempt at bundles, rather than a tool suitable for daily development, because daily development requires a one-stop tool, which is the vite and wmr mentioned later.

vite

It can be understood as a one-stop build tool that combines the characteristics of snowpack, and the whole process from development to release is done for you.

There are many usages involved. For details, please see official document .

Unlike snowpack, the product packaged by snowpack production is an independent file, while vite does not use esbuild but rollup packaging. The purpose is to package as a whole and avoid the risk of esbuild instability.

In addition, because vite is more integrated, it has many more features than snowpack, such as css splitting, multi-page, dependent pre-build using esbuild, monorepo support, multi-frame support, SSR, and so on. For details, see document introduction . However, the original text says that this has advantages and disadvantages. The advantage is that it can be used out of the box, and the disadvantage is that it lacks customization flexibility.

In fact, the revolutionary breakthrough is mainly bundles, and a series of convenient functions have been developed on this basis, which is worth learning for every engineering team. In fact, even if you decide to rebuild a wheel, you still need to make some fine-tuning in the default preferences on the basis of maintaining 90% of the functions. plug-in

In summary, Vite is an engineered family bucket that not only actively embraces new features, but also considers the production environment. In contrast, tools that are too cutting-edge in the technology stack can only be called toys, and Vite can really be used. .

wmr

Developed by the author of preact, it can be understood as the preact version of vite. Therefore, developers of the preact technology stack are more friendly and more integrated.

Another feature mentioned in the original text is that wmr uses htm convert JSX, so that it has a more accurate error reporting experience, that is, it can be accurate to the source code line and specified to the specific column.

The comprehensive function is similar to vite, single page + ssr are supported, if you usually use preact, or want to develop a small project, you can consider using wmr family bucket.

to sum up

There are two biggest features of the new generation of front-end construction tools: lower-level language writing, bundles, and high performance if described in one word. Actively embracing new browser features or cross-border knowledge can help make new breakthroughs in the front-end field.

In addition, the build tools have become more and more integrated, from esbuild, which is only used for compilation, to snowpack that supports development, to built-in best practices, and even supports back-end capabilities such as ssr, and finally to vitePress for vertical scenarios. , every abstraction is more out-of-the-box, but the reduced flexibility brought about has also become the reason for each team to build their own wheels. The higher the level, the more they have the urge to build their own wheels.

This is very similar to the field of visualization. Visualization ranges from the lowest level of svg, canvas, and webgl to an imperative framework based on its packaging, to a data-driven development framework, a fully JSON-configurable chart library, and even zero configuration. Guess the configuration based on the data. Smart projects are also less and less configured, but the flexibility is getting lower and lower. The level of use depends on the details of the project.

However, engineering is relatively standardized, because visualization is for users, and engineering is for programmers. We can't control user needs, but we can control programmers' development habits: P.

Finally, in addition to upgrading your co-construction tools, changing to an M1 chip computer can also greatly improve development efficiency. I personally test that the webpack construction speed is increased by 3 times!

The discussion address is: Intensive reading of "Comparison of New Generation Front-end Construction Tools" · Issue #316 · dt-fe/weekly

If you want to participate in the discussion, please click here , a new theme every week, weekend or Monday. Front-end intensive reading-to help you filter reliable content.

Follow front-end intensive reading WeChat public

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

Copyright statement: Freely reproduced-non-commercial-non-derivative-keep the signature ( Creative Commons 3.0 License )