Antd project various webpack packaging scheme

preface

The project backend uses ANTD’s components and has always felt good and powerful. Unfortunately, the overall package is too large, antD js alone has 990K (3.1.1), so we started to optimize the package size.

Use the officially recommended babel-plugin-import plug-in

Basically, this plugin solves the problem perfectly when the previous components are used sparingly. This plugin is actually optimized for the way it should be written

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; / / or antd/lib/button/style/CSS CSS file to loadCopy the code

Optimization has become

import { Button } from 'antd';
Copy the code

It’s essentially a separate Button component, and when you pack it, of course, you just punch the Button component in.

Template initialization

Use CommonsChunkPlugin to export the react, react-dom,react-router-dom packages separately as vendor.js.
Import ANTD components on demand using the babel-plugin-import plug-in.
The project initially consists of two pages, using HashRouter: Home page (home.js)->app.js and List page (list.js)->app-list.js loaded asynchronously using bundle-loader
```
import ListC from 'bundle-loader? lazy&name=app-list! ./List';
const List = Bundle(ListC)
...
<Route path={`${match.url}/list`} component={List} />
Copy the code
```
The template does not use any UI components at the beginning, and each resource size after build is as follows:
```
App.js -> 15K app-list-> 1.5K vendor.js-> 150K (including react,react-dom,react-router-dom)Copy the code
```

Use ANTD component with asynchronous loading (take Button component as an example, Button is used in List and Home)

Use the Button component only in the List component

 app.js->15k
 app-list->99k
 vendor.js->150k
Copy the code

Use the Button component only in the Home component

App. The app js - > 113 k - list - > 1.5 k vendor. Js - > 150 kCopy the code

Both the Home and List components use the Button component

App. The app js - > 113 k - list - > 1.63 k vendor. Js - > 150 kCopy the code

Conclusion: It can be seen that ANTD with asynchronous loading Button components will not be repeated packaging, if both Home and List components use Button components, only in app.js packaging Button components

Use commonChunk to enter ANTD into Vendor, and at the same time enable antD introduction on demand (take Button component as an example, Button is used in both List and Home)

App. The app js - > 94 k - list - > 1.64 k vendor. Js - > 1.38 M!!!!!!Copy the code

Conclusion: This means that the full ANTD is entered into Vendor and packaged again when the Button component is referenced on demand

Use commonChunk to enter ANTD into Vendor, and at the same time close ANTD import on demand:

App. Js - > 15.2 k app - list - > 1.61 k vendor. Js - > 1.38 M!!!!!!Copy the code

Conclusion: The complete ANTD was entered into Vendor. Although there was no repeated packaging when quoting Button, we strongly need to introduce it on demand, since ANTD is 990K after all.

Enable DLL packaging (react,react-dom,react-router-dom), CommonsChunkPlugin (react,react-dom,react-router-dom), antD on-demand reference (ANTD)

App. The app js - > 113 k - list - > 1.61 k vendor. Js - > 1.6 k common - 1.0.0. Js - > 161 kCopy the code

Conclusion: DllPlugin is similar to CommonsChunkPlugin. The difference is that CommonsChunkPlugin changes vendor.js every time CommonsChunkPlugin is repackaged, while DllPlugin does not change common.js. If two plugins are used together and the same library is packaged (react,react-dom,react-router-dom), commonChunk’s vendor content will almost always be stored in common.js. Antd on-demand reference components are not packaged repeatedly, which means that the react,react-dom, and react-router-dom steps of commonChunk components can be avoided.

Add multiple entry (app.js app2.js), close commonChunk plug-in, enable DLL, enable ANTD on demand reference

App2.js -> 4.88K app-list-> 1.63K app-list2-> 105K app2.js-> 4.88K app-list-> 1.63K app-list2-> 105K Common - 1.0.0. Js - > 161 kCopy the code

Conclusion: The DLL plugin can be used as commonChunk, and then start a new project using the scaffolding. Common-1.0.0.js is also used in another project, until the libraries in the DLL plugin change (react,react-dom,react-router-dom).

Use externals of webpack to import react,react-dom, and react-router-dom via script. Do not use antD components, commonChunk, and DLL.

App.js -> 12.4K (without Button component)Copy the code

React,react-dom, and react-router-dom are introduced via script using the externals property of webpack, using antD Button components

App.js ->115.k app-list->1.63kCopy the code

React,react-dom,react-router-dom, and ANTD are introduced by script using externals of webpack, and antD Button is used

App.js ->16.6k(with Button component) app-list->1.61k(with Button component)Copy the code

Conclusion: This method successfully strips out ANTD, but HTML needs to introduce antd.min.js and antd.min. CSS and moment.min.js!! , moment.min.js must come before ANTd or the Datepicker component will report an error. At the same time, the use of babel-plugin-import needs to be removed from the.babelrc file. If not removed, app.js will be 115K, which means antD’s Button component will still be plugged into app.js.

In conclusion:

It is more convenient to use the AutoDllPlugin to replace the dllPlugin plugin that comes with WebPack.
Use both the AutoDllPlugin and commonChunk plug-ins, if common base JS is not required for multiple projects.
Loading on demand cannot be used with Extarnals.
CommonChunk + ANTD on demand + page load on demand is the most convenient to use.
When using page on demand, to prevent components from being packaged repeatedly by multiple pages, place components on the root component. Such as: App-list and app-list pages both use Button, but the root component app.js is not used, so both app-List and app-list will type Button into their respective JS, which will prolong the packaging time. You can use Button in app.js. So app-list and app-list are not hitting Button.

The project address