[重构倒数第09天] - Vue-Cli + PurgeCSS 删除你用不到的CSS

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章,在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

我们在做专案的时候,不管是用框架开发,又或是一般的方式开发,都会需要写大量的CSS样式,但是往往在开发需求的时候,都会东改改西改改,甚至是之前写的CSS後来有改了其他的东西,结果忘记删掉旧的,甚至我们在引入其他人写的CSS组件的时候也会有很多用不到的CSS存在,这些CSS都会在我们进行专案 build的时候,都改它打包进去,所以就会增加无谓的容量,拖累网站载入的速度,所以我们除了要再上线的时候去压缩CSS以外,我们还要再 build 的时候去把没有用到的CSS给删除乾净,那应该要怎麽做呢?

PurgeCSS 这不就来了吗

PurgeCSS 就是一个用来删除你用不到的 CSS 的工具。它除了一般我们写的CSS以外,也很常应用在许多CSS框架上面,像是 TailwindCSS、Bootstrap、MaterializeCSS等,因为我们可能只会使用到一小部分的CSS,但是还有其他大量且我们用不到的CSS放在那边,所以我们才需要透过 PurgeCSS 来帮助我们把用不到的CSS给删除,瘦身我们最後 build 出去的 CSS。

PurgeCSS 官网 : https://purgecss.com/

马上在我们的 Vue-cli 专案上面来加入PurgeCSS

首先我们先开启终端机的视窗,路径移动到专案的资料夹里面

cd my-app

然後执行 vue add @fullhuman/purgecss 把整个 purgecss 的东西给挂载进来专案。

vue add @fullhuman/purgecss

这时候你会发现你多了一个 postcss.config.js

const IN_PRODUCTION = process.env.NODE_ENV === "production";

module.exports = {
  plugins: [
    IN_PRODUCTION &&
      require("@fullhuman/postcss-purgecss")({
        content: [`./public/**/*.html`, `./src/**/*.vue`],
        defaultExtractor(content) {
          const contentWithoutStyleBlocks = content.replace(
            /<style[^]+?<\/style>/gi,
            ""
          );
          return (
            contentWithoutStyleBlocks.match(
              /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
            ) || []
          );
        },
        safelist: [
          /-(leave|enter|appear)(|-(to|from|active))$/,
          /^(?!(|.*?:)cursor-move).+-move$/,
          /^router-link(|-exact)-active$/,
          /data-v-.*/,
        ],
      }),
  ],
};

这里面都是跟 PurgeCSS 有关的设定,细节我们等等再回来说,这样你专案的 PurgeCSS 就算设定完成了,接下来你就可以放心开发,然後 build 的时候 PurgeCSS 就会帮你删除没用到的 CSS。

But...

我们先来 build 一下档案

npm run build

你就会看到发生以下的错误 ( 如果没有这个错误就先不用管这段XD )

Vue mike

这问题是因为 postcss版本的问题造成的,所以我们只要降版本就可以正常运行了。

npm i -D @fullhuman/[email protected] [email protected]

我们再一次执行 npm 的安装,安装完成後再执行一个 build 就可以罗。

Vue mike

当我们已经可以正常 build 的时候就可以开始进入到细节设定的部分。

PurgeCSS 的设定介绍

这是我们现在的 postcss.config.js

const IN_PRODUCTION = process.env.NODE_ENV === "production";

module.exports = {
  plugins: [
    IN_PRODUCTION &&
      require("@fullhuman/postcss-purgecss")({
        content: [`./public/**/*.html`, `./src/**/*.vue`],
        keyframes: true,
        variables: true,
        defaultExtractor(content) {
          const contentWithoutStyleBlocks = content.replace(
            /<style[^]+?<\/style>/gi,
            ""
          );
          return (
            contentWithoutStyleBlocks.match(
              /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
            ) || []
          );
        },
        safelist: [
          /-(leave|enter|appear)(|-(to|from|active))$/,
          /^(?!(|.*?:)cursor-move).+-move$/,
          /^router-link(|-exact)-active$/,
          /data-v-.*/,
        ],
      }),
  ],
};

IN_PRODUCTION这个变数是用来判断现在环境是不是 production 的环境,因为我们再使用 PurgeCSS 清除用不到的 CSS 的时候,会去扫描专案所有的 .vue档案,但是当专案变大的时候这个扫描会越来越久,所以如果你再开发阶段的时候还持续使用 PurgeCSS ,那当每次存档的时候就会越来越慢,所以我们只会再专案要上线的时候执行 npm run build就好。

接下来我们来看一下 @fullhuman/postcss-purgecss 里面几个比较需要知道的设定选项

  1. content : PurgeCSS 会去扫描的档案,在这里面设定的路径以及副档名的档案都会被去 PurgeCSS 给扫描,所以今天如果你要去扫描其他的档案的话,只要在这里面增加路径跟副档名即可。
  2. defaultExtractor: 可以另外自定义扫描的规则,像是上面的例子,会去侦测style标签有没有用上其它的功能或是规则,然後再进一步的去处理 class。
  3. safelist : 你可以去指定哪一些 class 不会被 PurgeCSS 删除,即便它没有被用到,因为 PurgeCSS 扫描的是我们在 html 上面所用到的 class,所以如果是透过 javascript 另外加上去的,或是像是 vue 的 transition 的 class 那样的话,如果没有家加入 safelist里面,它就会在 build 的时候被删除。
  4. keyframes (default: false) : 如果有像是 @keyframes的 css 或是像我们用了一些动画的 css 套件,例如 animate.css等,只要设定成 true,就可以删除用不到的 @keyframes
  5. variables (default: false) : 跟 keyframes 很像,是用来删除没有用到的 css 变数,还有我们在使用大型的 CSS 框架像是 Bootstrap 的时候,就会很需要把这个参数加上去,改成 true来进行优化。

剩下其他的配置具体可以参考 PurgeCSS 官网
https://purgecss.com/configuration.html#configuration

实际来看一下效果

Vue

我先把 postcss.config.js那些PurgeCSS 设定都给注解,这样一来 build 就不会执行了,然後我写了一个 #AABBC来测试等等 build 的结果。

vue

build 结束後你会发现里面的 #AABBC 这个没有用到的 CSS 还在里面

Vue

那接下来我们把 PurgeCSS 打开来。

Vue

接下来你就会看到在 build 好的 CSS之中已经看不到 #AABBC 这个 id了,是不是非常的方便呢~ 开发的时候往往我们会漏掉许多细节,尤其是 css 的部分,不过透过工具的帮忙,我们可以很轻松地完成许多专案优化的部分,可以说是非常的方便阿。

关於 PurgeCSS 就先到这边告一段落

PurgeCSS 现在最被广为使用的就是 tailwindcss 这个 css 框架,不过在一般的专案上面也可以使用喔。

QRcode

那如果对於Vue3不够熟的话呢?

Ps. 购买的时候请登入或注册该平台的会员,然後再使用下面连结进入网站点击「立即购课」,这样才可以让我获得更多的课程分润,还可以帮助我完成更多丰富的内容给各位。

我有开设了一堂专门针对Vue3从零开始教学的课程,如果你觉得不错的话,可以购买我课程来学习
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果对於JS基础不熟的朋友,我也有开设JS的入门课程,可以参考这个课程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号,好友搜寻 @mike_cheng


<<:  推论统计-认识假设检定

>>:  Day 8 - 依 DEALERS 前台页面分析拆解後,逐步建立後台功能 (上) - GridView 应用 - ASP.NET Web Forms C#

DAY05 - [CSS] 三角型,来个推荐标签吧!

今日文章目录 > - 三角型使用情境 > - 用CSS画三角型 > - 参考资料...

[3D地图-CesiumJS系列] 一、快速上手

今天要来介绍3D地图的一个API,CesiumJS。 CesiumJS为一个开源JavaScript...

30天学会 Python: Day 29- 云端资料库

Firebase 云端服务平台之一,提供资料库、机器学习、虚拟机、登入验证等服务 建立专案 要使用 ...

CSS微动画 - Animation会影响网页效能!

Q: 今天的好像没有范例? A: 文长慎入,但有看有差!! 动画不能只是动画,还要动得不费力 上一...

以Postgresql为主,再聊聊资料库 PostgreSQL last N in-table cache 探讨

PostgreSQL last N in-table cache 探讨 前些天对悠游卡储值时,加值机...