Combine your own wheels to practice on-demand loading

This paper provides several ideas which are loaded on demand, and gives the corresponding practice. Original address

In order to explore the nature of on-demand loading, we chose to experiment with the previously made wheel Diana.

Experiment one: full-scale reference

import * as _ from 'diana'

Package volume results are as follows:

The test was Diana 0.4.1.

Experiment Two: Partial references

import { equal } from 'diana'

Package volume results are as follows:

After testing, it is found that the two ways of packaging after the volume is K, the second way will still be 整个包 introduced into the project. But Lodash is so playing, this is not the same as the agreed, is it overlooked any details?

The next step is to uncover the veil and reinvent the project, with the final goal of using the second notation to load on demand, reducing the volume of packaging.

Scenarios for on-demand loading

The effect of loading on demand is that there are no modules that are not introduced in the final packaged code to optimize the project volume. Here are 3 scenarios that can be loaded on demand.

Publish the NPM module separately for each function

On-demand scenario one is to publish each function separately for a package, which can be consulted on NPM on Lodash, which is quoted as follows:

import { isEqual } from 'lodash.isequal'

Each function is exported as a single module

On-demand scenarios the second is to export each function as a single module, referring to the idea of exposing each of Diana's functions to the Lib directory, some of which are as follows:

At this time again to test the package volume:

import equal from 'diana/lib/equal'

Package volume results are as follows:

You can see that the packing volume is reduced to about 1/7 of the original, but this scheme is too lengthy in writing, so what about the next Babel?

Scenario Two + Babel

Plan three is on the basis of the program two with the help of Babel plug-in, the wording can be as follows:

import { equal } from 'diana'

In the .babelrc following configuration:

// .babelrc{  "plugins": [    ["on-demand-loading", {"library": "diana"}]  ]}

At this point the packing volume is as follows:

In fact, the role of the Babel plugin is to import { equal } from 'diana' compile import equal from 'diana/lib/equal' .

Babel plug-in execution mechanism

The Babel execution trilogy is as follows:

• Analytical

Using Babel-parse to parse the JS code into an AST tree

• Transformation

The AST tree is traversed with babel-traverse, and the Babel-core is used to transform invoke the corresponding plugin to transform the AST tree.

babal.transform(code, {  plugins: { pluginA, pluginB }})

• Generated

Convert the AST tree back to the JS code using Babel-generator

Articles worthy of reading

• Babel Chinese website
• Anatomy Babel--babel Overview, this article is more thorough
• Babel-handbook,babel Manual, recommended
• Babel plug-in development of some examples, this article more bugs, can be used as a supplement to the above article
• AST explore, can see the JS code corresponding AST on this website