做前端開發的時候，我們經常會使用很多 CSS 框架、庫或是樣式文件。這些資源在一定程度上可以提高開發效率，但也有可能在項目中留下一些不必要的的樣式。例如，當使用 Vue.js 框架時，我們可能會引入大量的樣式文件，其中某些樣式可能并不需要使用。這可能會影響應用程序運行的性能且會導致不必要的浪費。因此，為了優化我們的 Vue.js 應用程序，我們需要減少不必要的 CSS。

// 引入不需要的 CSS 文件
import 'bootstrap/dist/css/bootstrap.css'
import 'font-awesome/css/font-awesome.css'
import 'animate.css/animate.css'

一種簡單的方法是刪除不必要的 CSS 文件并通過構建工具打包使用的 CSS。但這可能會導致大量的手動工作，而且在某些情況下，刪除不必要的 CSS 文件可能會導致不可預測的結果。相反，我們可以嘗試使用 PurgeCSS 庫，該庫可以自動刪除未使用的 CSS。在 Vue.js 中，我們可以使用 vue-cli-plugin-purgecss 插件來使用 PurgeCSS 庫。

npm install -D vue-cli-plugin-purgecss

為了使用插件，在 vue.config.js 文件中添加以下代碼：

module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
},
'purgecss': {
paths: ['./src/**/*.{vue,html}']
}
}
}

在代碼示例中，我們使用了參數 "paths"，將會匹配代碼及其導入的任何文件。然后 PurgeCSS 會掃描所有的 Vue 組件和 HTML 文件，并只保留被使用的 CSS 樣式以便后續應用。

最后，我們需要在 Vue 組件或其他地方使用到的 CSS 類名前，添加 PurgeCSS 忽略選項，否則會被 PurgeCSS 剔除。

...
...

在上面的代碼示例中，我們使用了 "purgecss:ignore" 來告訴 PurgeCSS，在掃描 CSS 文件時跳過這個 class，因為我們需要其余規則。這是使用 PurgeCSS 的另一種常見方法，因為它保留了所有 class 但其使用率低。

我們已經了解了如何通過使用 PurgeCSS 來去除 Vue.js 應用程序中的多余 CSS。這種方法不會刪除任何不必要的東西，而只是保留我們需要的東西。這可以有效地減少文件大小、加快網頁加載速度，使頁面更加清晰和干凈。