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
Total : 7.95mb

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
1
lugins: [
2
[
3
"import", {
4
"libraryName": "antd",
5
"style": true
6
}
7
]
8
]
Copied!
babel.config.js ( cập nhật )
1
2
plugins: [
3
[
4
"import", {
5
"libraryName": "antd",
6
"libraryDirectory": "es",
7
"style": true
8
}
9
]
10
]
Copied!
=> build check analyze

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
1
lugins: [
2
[
3
"import", {
4
"libraryName": "antd",
5
"libraryDirectory": "es",
6
"style": true
7
}
8
]
9
]
Copied!
babel.config.js ( cập nhật )
1
2
plugins: [
3
[
4
"import", {
5
"libraryName": "antd",
6
"libraryDirectory": "es",
7
"style": "css"
8
}
9
]
10
]
Copied!

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
  • css =>
babel.config.js
1
lugins: [
2
[
3
"import", {
4
"libraryName": "antd",
5
"libraryDirectory": "es",
6
"style": true
7
}
8
]
9
]
Copied!
babel.config.js ( cập nhật )
1
2
plugins: [
3
[
4
"import", {
5
"libraryName": "antd",
6
"libraryDirectory": "es",
7
"style": "css"
8
}
9
]
10
]
Copied!
2. upgrade babel-plugin-import ( 1.12.0 -> 1.13.3 )
1
$ npm install --save-dev [email protected]
Copied!

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
1
plugins: [
2
// load `moment/locale/en-gb.js` and `moment/locale/vi.js`
3
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|vi/),
4
]
Copied!
1
babel-plugin-transform-imports
Copied!

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
  • Cài đặt
1
$ npm install -save-dev babel-plugin-recharts
Copied!
2. Cấu hình
webpack.base.babel.js
1
plugins: ["recharts"]
Copied!
Last modified 11mo ago
Copy link