babel-plugin-import icon indicating copy to clipboard operation
babel-plugin-import copied to clipboard

`style: true` does not reduce bundle size

Open riwu opened this issue 5 years ago • 3 comments

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?

riwu avatar Sep 27 '18 07:09 riwu

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 avatar Oct 11 '18 06:10 JohnJiang900526

@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

riwu avatar Oct 11 '18 06:10 riwu

compare with set style to true I found the generate file size is smaller when set style to 'css'

ZhengYaoJiong avatar Nov 23 '20 14:11 ZhengYaoJiong