在 Laravel 中使用 PurgeCSS

前言： 用 React + TailwindCSS 搭了个后台应用，结果编译出来CSS文件3.74MB， 似乎有些大。于是想有什么办法可以精简一下。后得知 PurgeCSS。于是百度搜索相关实现。

关于 PurgeCSS

PurgeCSS 是一个用来删除未使用的 CSS 代码的工具。可以将它作为你的开发流程中的一个环节。 当你构建一个网站时，你可能会决定使用一个 CSS 框架，例如 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等，但是，你所用到的也只是框架的一小部分而已，大量 CSS 样式并未被使用。

接下来就该 PurgeCSS 上场了。PurgeCSS 通过分析你的内容和 CSS 文件，首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 CSS 中删除未使用的选择器，从而生成更小的 CSS 文件。

在 Laravel 中使用 PurgeCSS

根据网上教程，尝试安装插件: npm i laravel-mix-purgecss ，发现与laravel-mix版本存在冲突，于是删除旧版 laravel-mix 版本: npm remove laravel-mix, 然后重新安装 npm install laravel-mix 获取新版 laravel-mix 版本…

一顿操作后, CSS 文件从 3.74MB 变成了 39.2KB.

操作总结如下

1.  安装 laravel-mix-purgecss

npm i laravel-mix-purgecss

如果与当前应用中的laravel-mix版本有冲突，删除重装laravel-mix即可

2.  配置 webpack.mix.js 文件

官方示例

const mix = require('laravel-mix');
require('laravel-mix-purgecss');
// ...
mix.js('resources/js/app.js', 'public/js')   
      .sass('resources/sass/app.scss', 'public/css')   
      .purgeCss();

实际代码

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix.js('resources/js/admin/app.js', 'public/js/admin').react()
    .postCss("resources/css/app.css", "public/css/admin")
    .options({
        postCss:[require('tailwindcss')],
    })
    .purgeCss({enabled:true});

注意: 默认情况下，purgeCSS 只对编译生产环境下的资源起作用。可如上例，通过传入 {enabled:true} 参数使其在开发环境下工作

3. 编译资源

npm run watch

相关链接：https://laravel-mix.com/extensions/purgecss