perf: reduce mixins modal-mask #27998
Conversation
|
|
|
但是 mixin 中应该只有 mixin，现在包含了应用：e3ee4e8#diff-2bb94659407ed3ca5fdaf34034e5327f659262b53b5134602408f04d8868877eR44 导致 https://unpkg.alipay.com/browse/antd@4.8.5/es/time-picker/style/index.css 这里有了重复的样式代码生成。 需要去掉 mixin 的调用，把 |
|
👍 发现了一个大量冗余的地方。 |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit d497179:
|
Codecov Report
@@ Coverage Diff @@
## master #27998 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 389 389
Lines 7336 7336
Branches 2098 2045 -53
=========================================
Hits 7336 7336 Continue to review full report at Codecov.
|
|
不知道哪些地方在用 |
|
Size Change: +130 B (0%) Total Size: 790 kB
|
|
😂 删了后 css 大小竟然没动 |
|
看起来 只有 image 在用 |
|
Image 和 Modal 里有用到。 |
|
移除了 mixins/index 里的，在这 2 个组件中单独引入了。看看效果。 |
components/image/style/index.less
Outdated
| @@ -1,5 +1,6 @@ | |||
| @import '../../style/themes/index'; | |||
| @import '../../style/mixins/index'; | |||
| @import '../../style/mixins/modal-mask'; | |||
There was a problem hiding this comment.
不要这么改
- mixins 统一从
style/mixins/index里引用。 style/mixins/index只包含 mixin 的声明，不包括使用。- 引用到具体组件里再使用。
components/image/style/index.less
Outdated
| @@ -5,6 +5,8 @@ | |||
| @image-preview-prefix-cls: ~'@{image-prefix-cls}-preview'; | |||
|
|
|||
| .@{image-prefix-cls} { | |||
| .modal-mask(); | |||
|
文件怎么还大了。。。 |
components/modal/style/index.less
Outdated
| @@ -1,5 +1,6 @@ | |||
| @import '../../style/themes/index'; | |||
| @import '../../style/mixins/index'; | |||
| .modal-mask(); | |||
There was a problem hiding this comment.
另外 .modal-mask 里现在包括了 ant-modal 和 ant-image 两份样式，做成 mixin 的参数，调用的时候传各自的 prefixCls 进去吧。
|
是啊，奇了怪了 |
|
又加了 50 ... |
| .modal-mask() { | ||
| .@{dialog-mask-modal-prefix-cls}, | ||
| .@{dialog-mask-image-prefix-cls} { | ||
| .modal-mask(@className) { |
There was a problem hiding this comment.
.modal-mask() {
pointer-events: none;
&.zoom-enter,
&.zoom-appear {
...
}
&-mask {
...
}
...
}.@{dialog-prefix-cls} {
+ .modal-mask;
}.@{image-prefix-cls} {
&-preview {
+ .modal-mask;
}
}
|
变化可有可无.. |
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
📝 Changelog
☑️ Self Check before Merge