This article is written by ruomu, a team member. We have authorized the exclusive use of Doodle Big Front-end, including but not limited to editing, original annotation and other rights.

background

Recently, there was a demand for secondary packaging of basic components (such as ANTD) in the group. One day, I heard a discussion about how to package the component library of secondary packaging on demand. Hearing this, I began to wonder, because I had done the second packaging of the component library based on the basic component library before, but I had never thought about this place, and I thought about the reasons as follows:

  1. Encapsulation based on the underlying component library does a few things:

2. Based on point 1, in fact, we can also think about it carefully, the amount of code is not too much, and the package is not too big

Finally find a relatively reasonable reason for their own, ha ha. Since some people think so, follow along to explore ha.

How exactly do component libraries load on demand

Don’t know, don’t know, but at least used it, go to the well-known UI component library Antd website to check the use of components on demand:

Let’s take a look at the previous version 3. X document and make a big comparison

By contrast, is it very sober?

Antd 4.x version is loaded on demand using WebPack’s Treeshaking implementation based on ES Modules.

Antd 3.X uses the Babel plugin babel-plugin-import to import changes to the UI component module to implement on-demand loading:

Pay attention to the high energy ahead, melon coming, coming ha, carefully look at the following two pictures:

The second image is from babel-plugin-import GitHub. By default, the plugin should be imported from lib

What exactly is the principle of load on demand

All of this seems to miss the point, and indeed, to make sense of it, three things must be clear:

First: Webpack

Front-end project packaging, at present, the mainstream should be Webpack (Vite has a bit of momentum recently, the development experience is really good, if you are interested, you can try), first understand the packaging principle of Webpack, must go on the classic picture:

The dependencies are recursively queried from the entry files, and then bundled into one bundle or several bundles through various Loaders and plugins (code splitting).

That’s not the point. NPM packages now come in two formats: CommonJs and ES Modules. Then the question comes, how does Webpack know to load the dependent package in which format? I hurried to the Webpack official website to dig out the document, without looking for relevant points. Almighty Internet, someone mentioned that Webpack loads the corresponding package according to such rules:

It is probably like this, first point to here, do not understand it does not matter, behind the whole string again.

Second: NPM or package.json

Json (ES Module, CommonJS Module, ES Module, CommonJS Module)

(The module field is not officially defined by NPM, it was first introduced by rollup. Webpack is also used in package.json. If you look carefully, you’ll find that package.json has quite a few custom fields that might be useful for other tools.)

This way, Webpack knows how to work.

Third: What does the UI component library package output?

I don’t know, it doesn’t matter, look at the famous Antd, what output?

Is not very sober, do not understand?? ES Module and CommonJS Module

Treeshaking treeshaking treeshaking treeshaking treeshaking treeshaking treeshaking

conclusion

Everyone see officer, I do not know if you see understand ha, has been white piao [cover face][cover face][cover face][cover face], the first output, forgive me, forgive me ha, if you have a problem welcome to discuss communication ha

Test Demo address and addendum:

  1. If es and lib (CommonJS) packages exist at the same time, treeshaking will take effect for testing, and Babel plug-in will not take effect for loading on demand.

  2. Es branch, only support to build ES package output, treeshaking on demand test takes effect.

  3. Lib branch, only support to build lib (CommonJS) package output, Babel plug-in load on demand test effect.

  4. Niu-ui (Beggar version) is a test UI package, examples are validation cases, and verification is implemented through Webpack-bundle-Analyzer, NPM Link, and NPM Link niu-UI

  5. Trivia, write this article, the first to use antd direct validation, later found demonstrate not too straightforward, behind himself was adopted to realize a simple UI library, in order to achieve the antd also build packaged as a result, appeared in the process, and some interesting things, if you interested in packaging building, A related article will be added later.

Finally, I leave a question for you, careful children’s shoes, you may also found that the package es output by Antd, lib output by component dimension respectively, whether they are necessary or what ha, welcome everyone to leave a comment, hey, hey, zip, the end.