Minify your styled-components in next.js

问题起源AMP的custom-css:只允许50000size的css

这个其实蛮坑爹的,万一别人的站点就是比50000多怎么办? 无解!

哈哈,当然超出50000的页面应该是很少的,所以我们就不考虑这种情况了,我们今天是想去对已有的css做些优化: img

我们这个amp站点的公共css当中有没用的注释信息和空的css classname,因为用的是styled-components,所以看了 一下有关的配置项,发现了这样一项:

export default {
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": false,
        "fileName": false,
        "minify": true,
        "pure": true,
        "preprocess": false
      }
    ],
}

"minify": true 这项试了一下可以让无用的classname直接del掉,但是最关键的注释还在,然后用了一种比较hacker的方式: This link img

这是使用之后的效果:

img