Webpack Tutorial (vi)--separating component code

Let's run the Webpack command first.

See App.js only 4k.

Install react

NPM Install react--sava-dev

Introducing react in the App/index.js file

Run Webpack

See that our App.js file has reached 100k.

Because the app.js contains a large amount of code for react, it causes the volume to increase.

If a user's internet speed is only 1k/s, and App.js has the process of loading CSS, such as the CSS file has not been separated out of the situation, the user will wait several minutes to see the entire page.

This is beyond endurance. How to solve it?

Add the following configuration in Webpack.config.js.

Executes the Webpack command.

The app.js has shrunk to 2k,react and separated into vendor.js.

Run it in the browser and see

Here to notice, the first request is vendor.js, after the request is app.js.

Webpack Tutorial (vi)--separating component code