我有一个使用 Angular CLI 创建的 Angular 项目，所以我有 angular.json 文件用于配置构建。
我想集成 PurgeCSS，因为它似乎是减小 CSS 包大小的好工具。
在PurgeCSS website 上，他们解释了如何与 Webpack 集成。我找到了一个教程，解释了如何添加custom webpack integration with Angular CLI。
有人有 PurgeCSS 与 Angular CLI 项目集成的成功示例吗？
【问题讨论】：
标签： angular webpack angular-cli css-purge
还有另一种更符合 Angular CLI 和 Webpack 配置的方式：
你需要安装
npm install -D @angular-builders/custom-webpack postcss-scss @fullhuman/postcss-purgecss
然后创建一个webpack.config.js 配置文件：
const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('autoprefixer'),
purgecss({
content: ['./**/*.html'],
// Example to let PurgeCss know how to exclude cdk and mat prefixes if your using Angular CDK and Angular Material
whitelistPatterns: [/^cdk-|mat-/]
})
]
}
}
]
}
};
然后更改您的 angular.json 文件以使用此新配置：
...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
...
}
},
...
确保在捆绑最终应用程序时仅在生产模式下运行此配置。
希望这会有所帮助。
我创建了一个帖子来详细解释 - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02
【讨论】：
"builder": "@angular-devkit/build-angular:browser",，我该怎么做？这用于ng build --prod 命令。我可以以某种方式使用多个构建器吗？
我创建了这个 bash 脚本以在我的 Angular 应用程序中使用 PurgeCSS。它将我的“styles.css”文件大小从 63kb 减少到只有 3kb！希望它也对你有用。
步骤：
purgecss.sh 的新文件purgecss.sh文件./purgecss.sh
#!/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
【讨论】：
此配置适用于我，并在我的 styles.[hash].css 输出上为我提供从 126kb 到 34kb 的结果，用于生产构建。
首先，安装这个：
npm install -D @angular-builders/custom-webpack purgecss-webpack-plugin
然后，在项目根目录下创建webpack.config.js：
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
module.exports = {
plugins: [
new PurgeCSSPlugin({ paths: glob.sync('./src/**/*.html', { nodir: true }) })
]
};
并编辑您的angular.json 配置如下：
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
...
没有这个插件我的结果：
styles.ca3c7399cc89e60cfa2d.css | styles | 128.99 kB
现在有了purgecss-webpack-plugin：
styles.ca3c7399cc89e60cfa2d.css | styles | 34.46 kB
这太棒了，首先当我看到这个输出时，我在浏览器中检查了我的应用程序，所有样式都已正确包含:-)。
我认为唯一的缺点可能是这不适用于内联 html（如果有角度组件）。
【讨论】：
您可以在项目根目录中简单地运行以下命令
npm i -D postcss-import postcss-loader postcss-scss
ng add ngx-build-plus
在 angular.json 中，在 "architect" 部分进行以下替换：
"builder": "@angular-devkit/build-angular:browser" 与"builder": "ngx-build-plus:browser" 在"build" 下，
"builder": "@angular-devkit/build-angular:dev-server" 与"builder": "ngx-build-plus:dev-server" 在"serve" 下，
"builder": "@angular-devkit/build-angular:karma" 与"builder": "ngx-build-plus:karma" 在"test" 下，
您还应该在相关部分的选项下添加"extraWebpackConfig": "webpack.config.js"。
【讨论】：