babel-plugin-import
babel-plugin-import copied to clipboard
`style: true` does not reduce bundle size
On README it states that:
Note : with style: true css source files are imported and optimizations can be done during compilation time. With style: "css", pre bundled css files are imported as they are.
style: true can reduce the bundle size significantly, depending on your usage of the library.
I have tried the following 2 configurations for several of my projects but did not notice any significant difference in the js/css bundle size (it differs by a few bytes at most):
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
config,
);
Is this only applicable for certain libraries?
What kind of compilation time optimization can style: true
do?
Probably because you imported 'antd/dist/antd.less' in your page's js
if style is true, you do not import 'antd/dist/antd.less'('antd/dist/antd.css').
@JohnJiang900526 I did not.
Try building this: https://github.com/riwu/slions-web/blob/master/web/config-overrides.js
With style: true
:
File sizes after gzip:
218.7 KB build/static/js/main.7834052c.js 33.29 KB build/static/css/main.8d78b96f.css
With style: 'css'
:
File sizes after gzip:
218.7 KB build/static/js/main.7d920b8d.js 33.3 KB (+7 B) build/static/css/main.09ae0e64.css
compare with set style to true I found the generate file size is smaller when set style to 'css'