angular - 如何将 PurgeCSS 与 Angular CLI 项目集成

Question

我有一个使用 Angular CLI 创建的 Angular 项目，所以我有用于配置构建的 angular.json 文件。

我想集成 PurgeCSS，因为它似乎是减少 CSS 包大小的好工具。

在 PurgeCSS website ，他们解释了如何与 Webpack 集成。我找到了一个教程，解释了如何添加 custom webpack integration with Angular CLI .

有没有人有 PurgeCSS 与 Angular CLI 项目集成的成功例子？

Answer 1

我创建了这个 bash 脚本来在我的 Angular 应用程序中使用 PurgeCSS。它将我的“styles.css”文件大小从 63kb 减少到只有 3kb!希望它也适用于你。

步骤:

创建一个名为 purgecss.sh 的新文件在您的项目文件夹中

将以下代码插入 purgecss.sh文件

运行 ./purgecss.sh来自 CLI

#!/bin/bash

# run production build
ng build --prod --output-hashing none

# go to the dist/yourProjectName folder
cd ./dist/yourProjectName

# make a new directory named 'css' (you can name it anything)
mkdir css

# run PurgeCSS & make a new '.css' file inside the 'css' directory
purgecss --css ./styles.css --content ./index.html ./*.js --out ./css

# replace the 'dist/yourProjectName/styles.css' file with the 'dist/yourProjectName/css/styles.css' file
mv ./css/styles.css ./styles.css

# delete the previously created 'css' directory
rm -r css