如何将 PurgeCSS 与 Angular CLI 项目集成

Question

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

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

在 PurgeCSS 网站上，他们解释了如何与 Webpack 集成。我找到了一个教程，解释了如何添加 自定义 webpack 与 Angular CLI 集成。

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

Answer 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

Answer 2

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

步骤：

1. 在项目文件夹中创建一个名为

   purgecss.sh

   的新文件
2. 将以下代码插入

   purgecss.sh

   文件
3. 从 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

Answer 3

此配置适用于我，并在生产构建的

126kb

输出上为我提供从

34kb

到

styles.[hash].css

的结果。

首先，安装这个：

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（如果有角度组件）。

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

。

Answer 5

我找到了很好的答案这里 - 并且不需要应用自定义 webpack 配置

步骤：

1. npm 我清除

2. 将命令添加到package.json->scripts “postbuild”：“节点 postbuild.js”，

3. 并在项目根文件夹中创建包含此类内容的脚本 postbuild.js

   //“postbuild”：“节点环境/postbuild.js”， // 来自 https://dev.to/dylanvdmerwe/reduce-angular-style-size-using-purgecss-to-remove-unused-styles-3b2k

   const exec = require('child_process').exec; const fs = require('fs'); const 路径 = require('路径');

   //找到样式css文件 const 文件 = getFilesFromPath('./dist', '.css'); 让数据= [];

   if (!files && files.length <= 0) { console.log("cannot find style files to purge"); return; }

   for（让f的文件）{ // 获取原始文件大小 const originalSize = getFilesizeInKiloBytes('./dist/' + f) + "kb"; var o = { "file": f, "originalSize": originalSize, "newSize": "" }; 数据.push(o); }

   console.log("运行 PurgeCSS...");

   exec("purgecss -css dist/.css --content dist/index.html dist/.js -o dist/", function (error, stdout, stderr) { console.log("PurgeCSS 完成"); 控制台.log();

   for（令 d 为数据）{ // 获取新文件大小 const newSize = getFilesizeInKiloBytes('./dist/' + d.file) + "kb"; d.newSize = newSize; }

   console.table(数据); });

   函数 getFilesizeInKiloBytes(文件名) { var stats = fs.statSync(文件名); var fileSizeInBytes = stats.size / 1024; 返回 fileSizeInBytes.toFixed(2); }

   函数 getFilesFromPath(dir, 扩展名) { 让文件= fs.readdirSync(dir); return files.filter(e => path.extname(e).toLowerCase() === 扩展名); }

4. 在脚本中构建项目的正确路径（如果不是/dist而是/dist/projectName）

5. 它将在构建后自动运行，或者您可以使用 npm run postbuild 手动运行它。