51

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

ng build --aot true -prod

我想知道构建过程是否还会从引导程序中删除未使用的 css 类？

如果不是，我该如何添加 purifycss 之类的库？

编辑 2018 年 4 月

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

干杯

4

6 回答 6

7

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

但至少现在（2020 年）没有任何可靠的方法可以实现您想要的，并且还可以查看Angular 核心团队成员对此主题的回答

于 2020-03-29T23:18:15.543 回答
1 
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

于 2019-09-22T10:48:33.277 回答
0

不知道这是否算作一个答案，因为它与 angular-cli 并没有真正的关系，但是我以崇高的文本打开我的项目，然后启动UnusedCssFinder，它突出显示了我的 css 文件中所有未使用的属性。

于 2019-07-10T11:34:28.250 回答
0

如果你被驱逐，即ng eject。然后你可以自定义 webpack 构建来做大部分事情。minifyCSS作为构建的一部分，我在两个插件中打开了几个选项以最小化样式。

  1. LoaderOptions插件

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

  2. 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
    },
于 2017-08-17T17:50:40.103 回答
0

如果您使用的是 web pack，那么您可以这样做：-

一、安装purifycss-webpackusingnpm i -D 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

于 2017-04-28T10:07:16.753 回答
0

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

在这个文件中，您将只添加该组件使用的 CSS。您可以通过Google Chrome的“封面”发现每个页面使用的样式

于 2020-10-07T12:26:50.710 回答