umijs / babel-plugin-import

Modularly import plugin for babel.
3.15k stars 403 forks source link

style vs css 引入区别 #599

Open benzhemin opened 2 years ago

benzhemin commented 2 years ago

{ "libraryName": "antd", style: true } { "libraryName": "antd", style: "css" }

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.

这里特别提示: 用style会显著减少bundle的体积 (引入antd), 我看到编译后的css.js 和index.js 都会引入 require("../../style/default.css"); 这个文件

这里想问一下, 为什么style方式会显著影响?

感谢您的回复.

banbantx commented 2 years ago

style: true 引入的是 [xxxxxx].less或scss文件。

css: true 引入的 css文件。 以button为例。

下图:butto的css为true的引用。 image

下图: style为true的引用文件。 image

less文件会进行编译,根据你所配置的css模块提取,应该还能做到公共less抽离。如果已经是css了,应该是不行。具体可以看下webpack的公共模块抽取插件。