Может ли angular -cli удалить неиспользуемые css?

до сих пор самый маленький пучок, который я могу создать с угловым кликом, запустив

ng build --aot true -prod

Мне было интересно, если процесс сборки также удаляет неиспользуемые классы CSS, например, из начальной загрузки?

Если нет, то как я могу добавить к нему такие библиотеки, какrifycss?

РЕДАКТИРОВАТЬ Апрель 2018

Я до сих пор не нашел ни одного удовлетворительного решения его проблемы, особенно такого, которое совместимо с ленивыми загрузочными модулями с угловыми...

ура

Ответы

Ответ 1

Если вы используете веб-пакет, вы можете сделать это как: -

Сначала установите purifycss-webpackusing npm 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

Ответ 2

Если вы выбрасываете, т.е. 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
    },

Ответ 3

Может быть, вы можете взглянуть на https://github.com/Angular-RU/angular-cli-webpack. Это дает вам возможность изменить конфигурацию веб-пакета без извлечения. И угадайте, как выглядит первый пример: удаляет неиспользуемые селекторы из вашего CSS. Я не пробовал сам, но это может быть вариант.

Ответ 4

Не знаю, считается ли это ответом, потому что это на самом деле не относится к angular-cli, но я открываю свой проект в возвышенном тексте и запускаю UnusedCssFinder, который выделяет все неиспользуемые свойства в моем файле css.

Ответ 5

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')),
    })
  ]

};

сначала установите веб-пакет purycss