使用外掛 laravel-mix-purgecss 清除未使用的 css

今天進行程式碼最佳化，對 app.css 檔案進行了壓縮，後來在論壇搜尋，發現還可以對未使用的 css 進行清除。
於是直接便動手嘗試了，發現真的不錯。壓縮後的 app.css 檔案大小是 198k：

使用 laravel-mix-purgecss 外掛再次處理過後，檔案變成了74k，非常好！

經過簡單測試，暫時沒發現異常。

安裝

// 方法1：使用 yarn 安裝
yarn add laravel-mix-purgecss --dev

// 方法2：使用 npm 安裝（我使用的是這個）
npm install laravel-mix-purgecss --save-dev

修改配置檔案：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(); // <-- 加入此行

進行壓縮

npm run production

• 參考文章：零配置為你的 Laravel 專案新增 Purgecss 功能（清除未使用的 CSS 規則，加速頁面載入）

本作品採用《CC 協議》，轉載必須註明作者和本文連結