如何将 PurgeCSS 与 Angular CLI 项目集成

Question

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

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

在 PurgeCSS website, they explain how to integrate with Webpack. I found a tutorial that explains how to add 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

Answer 2

还有一种方式更符合Angular CLI 和Webpack config:

您需要安装

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"
    },
    ...
  }
},
...

请确保您运行此配置仅在生产模式下，当您捆绑最终应用程序时。

希望对您有所帮助。

我创建了一个 post 来详细解释 - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02

Answer 3

你可以在你的项目根目录下运行下面的命令

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

Answer 4

此配置对我有用，并在我的 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 不起作用，我认为 angular 组件中有的话。

如何将 PurgeCSS 与 Angular CLI 项目集成

How to integrate PurgeCSS with Angular CLI project

angular

webpack

angular-cli

css-purge