Note a component optimization based on the project using [email protected]

1.webpack-bundle-analyzer

Function:

Used to visualize the size of each file after packaging, so as to find the major optimizations.

Usage:

import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; . // webpack config plugins: [ new BundleAnalyzerPlugin({ analyzerPort: 8919 }) ],Copy the code

2. Introduce ANTD on demand

Look at the packaging analysis above and first optimize the component introduction of ANTD.

Cause: The current state is all imported.

Solution:

// webpack config module: { rules: [ { test: /\.(jsx?|tsx?)$/, ... use: [ { loader: 'babel-loader', options: Plugins: [[require('babel-plugin-import'), {libraryName: "antd-mobile", style: true}], // add: [require('babel-plugin-import'), { libraryName: "antd", style: True}, 'babek-plugin-import-antd'], // add a third parameter as alias]}},]}]}Copy the code

Effect comparison: The size introduced by packaged ANTD decreased from 2.17m to 498K

Package before Modification

Package after modification

3. Introduce @ant-design-icon on demand

The reason:

If antD-Icon is used, the entire icon file is packaged.

Icon was not used in this project, but it was still packaged.

This is because icon is used in the component we are using.

By looking at the code, the component is useful for a default icon-down.

We will write a separate export file instead of @ant-design/ ICONS /lib/dist to export the ICONS we need.

Solution:

/ / webpack packaging file resolve: {extensions: [' js', 'JSX', 'json', 'less' and 'ts',' benchmark '], alias: {... // The following addition is to replace the import file with a file we wrote ourselves, which only introduces the icon '@ant-design/ ICONS /lib/dist$' we want: PathUtils.uniformResolve(componentDir, 'icons.js') } },Copy the code
// icons.js // The reason for redefining the __esModule field here is because, in antd-icon's loading logic, object.keys () iterates through the imported icon file. __esModule becomes enumerable in our change, so redefining it, Object. DefineProperty (exports, "__esModule", {value: true, Enumerable :false}); export { default as DownOutline } from '@ant-design/icons/lib/outline/DownOutline';Copy the code

Effect comparison:

The introduction of packaged ANTD-Icon from 548K will be 20K

Package before Modification

Package after modification

4. Compressed moment. Js

Reason: Moment. Js is also a library introduced in ANTD, and we didn’t knock it out even though we used on-demand import.

The main reason why moment is big is because there are all kinds of language packs in it. We only keep Chinese and delete all the others.

Solution:

Import webpack from 'webpack'; plugins: [ new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/), ]Copy the code

Moment reduced from 672K to 174K

Package before Modification

Package after modification

5. Very large LESS files

The reason:

The main reason why the local LESS file is particularly large is to reset the ANTD theme style. Two less files from the ANTD library were introduced

Other issues:

This writing of global coverage is feasible without the introduction of other antD projects.

Since this project is a component of the H5 editing platform, which also uses ANTD, the platform code will be washed out when the component is inserted. The theme color of the platform is also overwritten by the theme color of the component.

Therefore, it is recommended to use ANTD-Mobile in component development. Secondly, when using global style overwriting, it should be noted that there is a unique layer of class on the outside to prevent overwriting.

Solution:

Since this project uses a few components, mainly form components, I use the manual writing style to cover the theme color and remove all the above three less.

Effect:

Two less files reduced from 914K to 9K

Package before modification:

Package after modification:

6. The overall index.js size decreased from 7.65m to 3.46m.

Modify before:

Revised: