TailwindCSS加入minfy压缩器,让产出的CSS档足足瘦了1/3

4xwsn4xwsn4xwsn

自从使用了Tailwind CSS后,就已回不去使用传统的CSS,一行一行慢慢的输入属性与定义样式名称,只需要在HTML的标签中加入相关的设置,TailwindCSS就可即时的将这些设置值,编译成CSS甚至包含多装置也能轻松完成,通过TailwindCSS所编译的CSS则是未压缩,因此当网页上线时,就得再将CSS进行压缩。

而先前也介绍过在VS Code直接使用minfy外挂,让在VS Code中就可压缩CSS,但现在不用这么麻烦啦! 其实是可以在tailwindCSS的项目中,直接将CSS进行压缩,至于要怎么做,现在就一块来看看吧!!


Step1
首先开启package.json,并在dev后方加一个逗号后,再加入prod与–minfy,并设置压缩后的文件名,这里摩榜是多了一个min,方便自己进行辨示。

5jlim5jlim5jlim

Step2
设置完毕后,在NPM下方就会看到刚所输入的指令,接着再下后方的箭头。

52vik52vik52vik

Step3
这时在项目目录中,就会再产出一个min的css文件。

cypbccypbccypbc

Step4
立马来比较看看,当压缩后CSS足足少掉了1/3,因此还没使用的朋友,也赶快手动加入吧!

tzy6ptzy6ptzy6p
(0)
老哥老哥

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注