Log : Optimize bundle size

Nhật kí optimize bundle size webpack react-boilerplate

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

• 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

• Cài đặt

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

2. Cấu hình

webpack.base.babel.js

plugins: ["recharts"]