Question

到目前为止，我可以使用angular cli创建的最小的bundle是运行

ng build --aot true -prod

我想知道构建过程是否也删除了未使用的css类，例如来自bootstrap？

如果没有，我怎样才能添加像purifycss这样的库？

2018年4月编辑

我仍然没有找到任何令人满意的解决方案来解决他的问题，特别是那个与带有角度的延迟加载模块兼容的解决方案......

干杯

Answer 1

我最近对此进行了一些研究，但是我找不到任何真正安全的方法来删除未使用的CSS。但是我遇到了一些工具，可以帮助您检测VS Code中的死代码。 extention并不完美，但看起来很有希望。我还对如何删除未使用的Angular Material CSS（如果使用它）进行了一些调查，并创建了有关它的视频。您可以check this out here。

但是至少在现在（2020年），没有任何可靠的方法来实现您想要的目标，并且还会看到answer from Angular Core Team member about this topic

Answer 2

如果您使用的是网络包，那么您可以这样做： -

首先，使用npm i -D purifycss-webpack

安装purifycss-webpack

module.export={
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]

};

请访问以下链接以获取详细信息。

https://github.com/webpack-contrib/purifycss-webpack

Answer 3

如果你被驱逐出境，即ng eject。然后，您可以自定义webpack构建以执行大多数操作。我在两个插件中使用minifyCSS作为构建的一部分，打开了几个选项来最小化样式。

LoaderOptionsPlugin

new LoaderOptionsPlugin({
  "sourceMap": false,
  "options": {
    "html-minifier-loader": {
        "removeComments": true,
        "collapseWhitespace": true,
        "conservativeCollapse": true,
        "preserveLineBreaks": true,
        "caseSensitive": true,
        "minifyCSS": true
    },

HtmlWebpackPlugin

new HtmlWebpackPlugin({
  "template": "./src\\index.ejs",
  "filename": "./index.html",
  "hash": true,
  "inject": true,
  "compile": true,
  "favicon": 'src/assets/Flag.png',
  "minify": {
      collapseWhitespace: true,
      removeComments: true,
      minifyCSS: true
    },

Answer 4

也许你可以看看https://github.com/Angular-RU/angular-cli-webpack。这使您可以在不弹出的情况下更改webpack配置。猜猜第一个例子是什么：从CSS中删除未使用的选择器。我自己没有尝试过，但它可能是一种选择。

Answer 5

不知道这是否可以作为答案，因为它与angular-cli无关，但是我以崇高的文字打开项目，然后启动UnusedCssFinder，突出显示了CSS中所有未使用的属性文件。

Answer 6

module.export={
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]

};

先安装purifycss Webpack

Answer 7

在Angular中，最好的选择是为每个组件创建一个单独的CSS文件，并使用ViewEncapsulated.Emulated。

在此文件中，您将仅添加此组件使用的CSS。您可以通过Google Chrome

中的“ coverge”发现每个页面使用的样式

angular-cli可以删除未使用的css吗？

7 个答案: