Comment on page

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
lugins: [
[
"import", {
"libraryName": "antd",
"style": true
}
]
]
babel.config.js ( cập nhật )
plugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
=> 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
lugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
babel.config.js ( cập nhật )
plugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]

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
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 [email protected].

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

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
$ npm install -save-dev babel-plugin-recharts
2. Cấu hình
webpack.base.babel.js
plugins: ["recharts"]