On-Demand JS Imports: async import(), Babel plugin, Tree Shaking, Conditional Compilation

Why "On-Demand Import"

When a project grows, unoptimized builds can cause slow homepage loading, large chunks, tangled environment configurations, and manual code removal during debugging. These issues stem from unreasonable build behavior, and the article shares several on-demand import solutions.

Async loading with import()

The import() syntax provides dynamic loading in ES6. It returns a Promise whose resolved value contains the exported module.

Webpack compiles import() to a WebpackJsonp style loader, creating a separate chunk that is injected via a <script> tag when needed. Custom chunk names can be set with comments like /* webpackChunkName: "xxx" */.

Native ES6 usage

Webpack compiled result

On-Demand Import with babel-plugin-import

babel-plugin-import

is a Babel plugin that enables selective import of third‑party libraries. By default it expects a lib folder with camel‑case module files, but it can be configured to customize import paths, support environment‑specific modules, component libraries, and utility libraries.

Default configuration example with Ant Design

Configuration file .babelrc

Business code

The import of Button from antd is compiled to antd/lib/button.

Custom configuration example

Configuration file babel.config.js

Custom customName functions can modify import paths; see Babel documentation for details.

Custom Babel plugin example

The plugin transforms statements like import { abc } from 'xxx'; into import abc from 'xxx/lib/abc.js', similar to babel-plugin-import.

On-Demand Removal: Tree Shaking

Tree Shaking removes dead code—unused modules without side effects—from the final bundle.

Tree Shaking relies on the static structure of ES2015 module syntax ( import and export ) and was popularized by Rollup.

What is dead code?

Pure (side‑effect‑free) ES2015 modules contain only exports. Code with side effects executes when the module is imported.

How to enable Tree Shaking in Webpack 4

Use ES2015 import / export syntax.

Ensure Babel does not transpile modules to CommonJS (disable the default @babel/preset-env behavior).

Add a sideEffects field in package.json to mark files with side effects.

Optionally mark individual modules as pure.

Set mode to production to enable additional optimizations.

On-Demand Conditional Compilation

Conditional compilation removes code for irrelevant platforms at build time. Example using uni‑app:

demo.html

demo.js

Only when the target platform matches the condition will the code be included in the final bundle.

uglify-js-plugin

Configure webpack.config.js and write code guarded by a global variable defined via define-plugin. When the variable evaluates to false, the code becomes dead and is removed.

js-conditional-compile-loader

A dedicated Webpack loader that processes files as strings, allowing conditional compilation of any code block. It must be placed as the last loader in the rule chain.

Summary

Async loading with import() and WebpackJsonp.

On-demand import via babel-plugin-import (including custom customName and ImportDeclaration handling).

Tree Shaking to eliminate pure, unused code.

Conditional compilation using uglify-js-plugin and js-conditional-compile-loader.

These four on-demand techniques help solve many build‑related problems without reinventing the wheel.