如何将 PurgeCSS 与 Angular CLI 项目集成

Posted 2023-03-06

【中文标题】如何将 PurgeCSS 与 Angular CLI 项目集成

【英文标题】：How to integrate PurgeCSS with Angular CLI project

【发布时间】：2020-01-26 12:05:25

【问题描述】：

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

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

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

有人有 PurgeCSS 与 Angular CLI 项目集成的成功示例吗？

【参考方案1】：

还有另一种更符合 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 命令。我可以以某种方式使用多个构建器吗？

对我来说，当我的 style.scss 中有一些导入时，它似乎不起作用。例如。 @import '自定义变量'; ***.com/questions/60210139/…

【参考方案2】：

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

步骤：

在您的项目文件夹中创建一个名为 purgecss.sh 的新文件 将以下代码插入purgecss.sh文件 从 CLI 运行 ./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

【讨论】：

我还没有检查过@AlexanderGharibashvili

【参考方案3】：

此配置适用于我，并在我的 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（如果有角度组件）。

【讨论】：

感谢您的出色解决方案。我想补充一点： glob.sync('./src/**/*.html' 选择 HTML 文件可能会导致错误。因为您可以在 TS 文件中设置类名。选择所有文件 ('./src /**/*') 是一个不错的选择。

【参考方案4】：

您可以在项目根目录中简单地运行以下命令

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"。

【讨论】：

你已经告诉在最后一行添加 webpack.config.js，但它的内容应该是什么？