Shulou(Shulou.com)06/03 Report--

This article is to share with you what other tools similar to Webpack are, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

I. Modularization tools

Modularization is a way to deal with the decomposition of complex systems into better manageable modules

Can be used to segment, organize, and package applications. Each module performs a specific sub-function, and all modules are assembled in some way to form a whole (bundle).

In the front-end field, webpack is not the only excellent module packaging tool, but also other similar tools, such as Rollup, Parcel, snowpack, and the most recent Vite.

Through these module packaging tools, we can improve our development efficiency and reduce development costs.

Gulp and grunt are not mentioned here because they are only defined as build tools and cannot be compared.

Rollup

Rollup is an ES Modules baler, in terms of function, Rollup is very similar to Webpack. But it's much smaller than Webpack,Rollup.

Now many libraries we are familiar with use it for packaging, such as Vue, React, three.js and so on.

For example:

/ /. / src/messages.js export default {hi: 'Hey Guys I am zce~'} / /. / src/logger.js export const log = msg = > {console.log ('- INFO -') console.log (msg) console.log ('- -')} export const error = msg = > {console.error ('- ERROR -') console.error (msg) console.error ('- -')} /. / src/index.js import {log} from'. / logger' import messages from'. / messages' log (messages.hi)

And then packaged through rollup

$npx rollup. / src/index.js-- file. / dist/bundle.js

The package result is as follows

As you can see, the code is very concise, and completion doesn't have a lot of bootstrap code and module functions like webpack.

And because the error method is not used, there is no error method in the output result. As you can see, rollup starts the Tree-shaking optimization output result by default.

Therefore, you can see the advantages of Rollup:

The code is more efficient and more efficient

Tree-shaking is supported by default

But the disadvantage is also very obvious, loading other types of resource files or supporting the import of CommonJS modules, or compiling new features of ES, these additional requirements of Rollup need to be completed by plug-ins.

Generally speaking, rollup is not suitable for developing applications, because third-party modules are needed. At present, most third-party modules export members by CommonJs, and rollup does not support HMR, which reduces the efficiency of development.

But when used to package JavaScript libraries, rollup has an advantage over webpack because the packaged code is smaller and faster, and its disadvantages can be ignored

Parcel

Parcel, a completely zero-configuration front-end baler, provides a "stupid" experience that allows you to build front-end applications with simple commands.

Like Webpack, Parcel supports any type of file as the packaging entry, but it is recommended to use the HTML file as the entry, which writes code and references resources as usual. As follows:

Parcel Tutorials

The main.js file imports other module members through the ES Moudle method

/. / src/main.js import {log} from'. / logger' log ('hello parcel') /. / src/logger.js export const log = msg = > {console.log ('-INFO -') console.log (msg)}

After running, use the command to package

Npx parcel src/index.html

After executing the command, Parcel not only packages the application, but also starts a development server, just like webpack Dev Server

Similar to webpack, it also supports hot replacement of modules, but it is easier to use.

At the same time, Parcel has a very useful feature: support automatic installation of dependencies, such as the webpack development phase suddenly use to install a third-party dependency, it is bound to terminate dev server and then install and start again. And Parcel eliminates the tedious workflow.

At the same time, Parcel can load other types of resource files with zero configuration, and there is no need to configure the corresponding loader like webpack

The packaging command is as follows:

Npx parcel src/index.html

Because the packaging process involves multiple processes working at the same time, the build is faster than Webpack, the output file is compressed, and the style code is extracted separately into a single file

It can be felt that Parcel gives developers a lot of freedom, just to implement the business code, and other things to be solved by Parcel

Snowpack

Snowpack, a lightning fast front-end build tool designed for modern Web, an alternative to more complex packaging tools such as Webpack or Parcel, uses JavaScript's native module system to avoid unnecessary work and maintain a smooth development experience

During the development phase, Webpack and Parcel need to rebuild and repackage the entire bundle of the application each time a single file is saved. While Snowpack builds each file for your application once, it can be permanently cached, and when the file changes, Snowpack will rebuild the single file.

The following figure shows the difference between webpack and snowpack packaging:

There is no time to waste every time you rebuild, just HMR updates in the browser

Vite

Vite, a new front-end building tool, can significantly improve the front-end development experience.

It mainly consists of two parts:

A development server that provides rich built-in features based on native ES modules, such as the surprisingly fast [module hot update HMR]

A set of build instructions that package your code using Rollup, and it is preconfigured to output optimized static resources for production environments

Its function is similar to that of webpack+ webpack-dev-server with the following characteristics:

Fast cold start

Instant module hot update

True on-demand compilation

Vite starts the development server directly and does not need to be packaged, which means that it does not need to analyze the dependencies of modules and does not need to be compiled, so it starts very fast.

Making use of the feature that modern browsers support ES Module, when the browser requests a module, it compiles the contents of the module as needed, which greatly shortens the compilation time.

The schematic is as follows:

In the aspect of hot module HMR, when modifying a module, you only need to ask the browser to request the module again, and you don't need to compile all the dependent modules of the module as webpack does, so it is more efficient.

Webpack

Compared with the above modular tools, webpack is large and comprehensive, and many commonly used functions can be used out of the box. There are two core features: "everything is a module" and "load on demand"

Compared with other build tools, it has the following advantages:

Intelligent parsing: compatible with the syntax of CommonJS, AMD and ES6

Everything module: support packaging for js, css, pictures and other resource files

Out of the box: HRM, Tree-shaking and other functions

Code segmentation: code can be cut into different chunk to achieve on-demand loading, reducing initialization time

Plug-in system with powerful Plugin interface and better flexibility and expansibility

Easy to debug: support for SourceUrls and SourceMaps

Fast run: webpack uses asynchronous IO and has multi-level caching, which makes webpack faster and faster in incremental compilation

Good ecological environment: richer communities and easier problems to solve

These are the other tools similar to Webpack, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.