umijs / babel-plugin-import

Modularly import plugin for babel.
3.16k stars 404 forks source link

`style: true` does not reduce bundle size #273

Open riwu opened 5 years ago

riwu commented 5 years ago

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?

JohnJiang900526 commented 5 years ago

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').

riwu commented 5 years ago

@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

ZhengYaoJiong commented 3 years ago

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