Log : Optimize bundle size

Nhật kí optimize bundle size webpack react-boilerplate
7.95 MB
7.87 MB
8.22 MB
7.87 MB
7.87 MB
7.87 MB
7.95 MB

Total : 7.95mb

7.87 MB

Ant design

Result:

  • Total : 7.87mb

  • Giảm: 7.95 - 7.87 = 0.08mb

Size:

  • Total : 7.95mb

  • ant css: 1.97mb

  • ant lib: 1.57mb

  • ant es: 1.55mb

Action:

  • optimize babel-plugin-import

  • load lybrary từ lib thành es

babel.config.js
lugins: [
[
"import", {
"libraryName": "antd",
"style": true
}
]
]
babel.config.js ( cập nhật )
plugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]

=> build check analyze

8.22 MB

Ant design

Result:

  • Total : 8.22mb

  • Tăng : 8.22 - 7.87 = 0.35mb

Size:

  • Total : 7.95mb

  • ant css: 1.97mb

  • ant lib: 1.57mb

  • ant es: 1.mb

Action:

  • optimize babel-plugin-import

  • style true => css

babel.config.js
lugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
babel.config.js ( cập nhật )
plugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
7.87 MB

Ant design

Result:

  • Total : 7.87mb

  • Giảm : 8.22 - 7.87 = 0.35mb

Size:

  • Total : 8.22mb

  • ant css: 1.97mb

  • ant lib: 1.57mb

  • ant es: 1.mb

Action:

  • optimize babel-plugin-import

  • style css => true

  • upgrace babel-plugin-import từ bản 1.12.0 -> 1.13.3

  1. css =>

babel.config.js
lugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
babel.config.js ( cập nhật )
plugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]

2. upgrade babel-plugin-import ( 1.12.0 -> 1.13.3 )

$ npm install --save-dev babel-plugin-import@1.13.
7.87 MB

Moment JS

Result:

  • Total : 7.87mb

  • Giảm : 7.87 - 7.87 = 0mb

Size:

  • Total : 7.87mb

Action:

  • optimize load file locate: en-gb & vi ( tiếng anh mỹ & tiếng việt )

webpack.base.babel.js
plugins: [
// load `moment/locale/en-gb.js` and `moment/locale/vi.js`
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|vi/),
]
babel-plugin-transform-imports
7.87 MB

Rechart

Result:

  • Total : 7.87mb

  • Giảm : 7.87 - 7.87 = 0mb

Size:

  • Total : 7.87mb

  • Recharts: 254.19kb

Action:

  • tối ưu bằng babel-plugin-recharts

  1. Cài đặt

$ npm install -save-dev babel-plugin-recharts

2. Cấu hình

webpack.base.babel.js
plugins: ["recharts"]