Webpack-code splitting

Code splitting is one of the most compelling features of Webpack. This feature allows-to-split your code into various bundles which can-then is loaded on demand or in parallel. It can used to achieve smaller bundles and control resource load prioritization which, if used correctly, can has a MA Jor impact on load time.

In layman's terms, the code is divided into many chunks (chunk).

Then why do you want to split the pieces?

Before, in order to reduce the HTTP request, we packaged all the code into a separate JS file. However, if the JS file is too large, the download speed is very slow, not worth the candle.

So WEBAPCK implements the block of code and then loads it when a block of code is needed.

There are three main methods of Code splitting:

1. Entry points:manually Split code using Entry configuration (by adding a portal file)

2. Prevent Duplication:use Splitchunksplugin to Dedupe and split chunks

3.Dynamic import:split code via inline function calls within modules

Method one is to add the entry file

Project

Index.js

Print.js

Webpack.common.js

Operation Result:

This method is the simplest, but there are many flaws, it is difficult to see

1. Both the index.js and print.js files are introduced Lodash, and the repeating Lodash module is loaded two times

2. It is inflexible and cannot dynamically separate business and core applications

Now we need to extract the public Lodash module. Then we can use the Splitchunksplugin plugin.

2. Prevention of duplication, extraction of public dependence
Webpack.config.js

Webpack4 has abandoned commonchunkplugin, using Splitchunkplugin.

Operation Result:

Compared to the last one. Running time is less than 100 ms, app.bundle.js and print.bundle.js size are much smaller, Lodash has been removed from these two files.

But this method is not yet available to load on demand

3. Dynamic import of imports

Using import (), the Webpack import() is a separation point--split-point, which is used to separate the requested module into a separate module.

import()把The name of the module as a parameter, and returns aPromise: import(name)->Promise.

RUN:NPM Run Server

Obviously see Lodash not packed in app.bundle.js file.

Webpack-code splitting