Code Splitting

What is the

Code Splitting is one of the most compelling features in WebPack. This feature enables you to separate code into different bundles and load these files on demand or in parallel. Code separation can be used to obtain smaller bundles and control resource load priorities, which, when used properly, can greatly affect load times. First of all, let’s ignore code splitting in Webpack and talk about code splitting that we do in our daily development. Let’s take the familiar plugin library **lodash.js ** to do a test. Start by installing LoDash

npm install lodash -S
Copy the code

It is then introduced in **main.js ** and one of the methods is used

import _ from 'lodash'

console.log(_.join(['a'.'b'.'c']))
Copy the code

For testing purposes, we have added a package command

"dev-build": "webpack --config ./build/webpack.dev.js"
Copy the code

After executing the command, we can look at main.js in the dist directory and see that the contents of LoDash have been packaged into it. If loDash is (1MB) and our business code is large (1MB), then the user accesses main.js and loads 1MB+1MB=2MB files. The file will take a long time to load. There is another problem. Lodash usually doesn’t change when we introduce it, but our business code changes frequently, which means that every time we change the business code, users have to reload the LoDash + business code again. This is not what we expected, and here’s how to fix it. First we’ll create a new lodash.js, which we’ll import and mount to the Window.

import _ from 'lodash'
window. = _ _Copy the code

Then let’s modify the Entry configuration item of the WebPack configuration file

entry: {
        lodash: path.resolve(__dirname, '.. /src/lodash.js'),
        main: path.resolve(__dirname, '.. /src/main.js')},Copy the code

Then we execute the package command and see that index.html introduces lodash.js and main.js, respectively, so we have solved the problem.

The order of entries affects the order in which index. HTML is introduced

The above are manual code splitting we can do in daily development, but it can be very troublesome to do so. Is there a plug-in that can automatically help us achieve code splitting? Next, let’s introduce the plug-in that can automatically do code splitting in Webpack4.

What is the

Initially, chunks and modules imported into them are connected via parent-child diagrams within the WebPack. In webpack3, the CommonsChunkPlugin is used to avoid duplication of dependencies between them. In webpack4 CommonsChunkPlugin have been removed, replaced by optimization. The splitChunks and optimization runtimeChunk configuration items, below show how they will work. In short, “Common module extraction plug-in”

import _ from 'lodash'

console.log(_.join(['a'.'b'.'c']))
Copy the code

optimization:{
        splitChunks: {chunks: 'all'}}Copy the code

Lazy loading

We can also do this in main.js

const getLodash = () = > import('lodash')

getLodash()
Copy the code

This introduction is asynchronous, so let’s see if the package works properly by executing the following package command



You can see that it is packaged normally, and this file contains the code for LoDash.

Now the file name is id value +.js generated by code splitting, can we set a preset name for the target file?

There is a syntax in asynchronously loaded components called **Magic Comment ** that does this. Let’s write it this way

const getLodash = () = > import(/* webpackChunkName:"lodash" */ 'lodash')

getLodash()
Copy the code

Js file names are not the clean lodash.js we want, so the next chapter will address this problem by introducing SplitChunksPlugin configuration items.

Dynamic-import-webpack is an off-site plugin that can be implemented in the latest Babel via @babel/plugin-syntax-dynamic-import. This can also be done with @babel/preset-env in conjunction with core-js@3.