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"]
​
​