如何设置按需加载样式

来源:12-7 生成最终使用的样式文件

慕婉清2507852

2020-07-01

老师您好,请问代码库生成的css是全部的样式吧?如何按需加载样式呢?比如我在其他项目中引入该组件库中的1个组件,不需要把所有的样式都引入吧?

写回答

2回答

业火之理

2020-07-02

一般都是按需加载js,很少有按需加载css,按需加载css也能完成,但是有很多缺点,比如会增多网络请求。

按需加载css很简单,将所有样式分组件分开写各自导入组件就完事了。编译出来一个组件配着一个css,就是完全的按需加载css了。当然你也可以考虑css in js的做法,完全无css,直接用js写css,就是完全的按需加载css了。

0
1
慕婉清2507852
非常感谢!
2020-07-19
共1条回复

张轩

2020-07-02

楼上的同学说的很好 

我们的样式的 sass 文件都是分开编写的 所以按需加载理论上应该是没有问题的 同学可以使用 antd 的 babel-plugin-import 来实现类似的功能 https://www.npmjs.com/package/babel-plugin-import


1
1
业火之理
antd的babel/ts-plugin-import 其实只是按需加载了js,并没有做到按需加载css,因为antd把sideeffects里样式全部过滤掉了,所以如果只导入antd一个组件,且import设置true或者css/less,会把antd所有css全部拉来。
2020-07-02
共1条回复

React18+TS高仿AntD从零到一打造组件库

设计,开发,测试,发布再到 CI/CD,从0到1造轮子

2123 学习 · 959 问题

查看课程