Log : Optimize bundle size

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!
​
​