Log : Optimize bundle size
Nhật kí optimize bundle size webpack react-boilerplate
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
lugins: [
[
"import", {
"libraryName": "antd",
"style": true
}
]
]
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
lugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
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 =>
lugins: [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
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.
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 )
plugins: [
// load `moment/locale/en-gb.js` and `moment/locale/vi.js`
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|vi/),
]
babel-plugin-transform-imports
Last updated