Cssnano не удаляет дубликаты - PullRequest
0 голосов
/ 29 сентября 2018

У меня есть веб-приложение React, где я использую модули CSS.Я использую Webpack для сборки приложения.

Связанные части из webpack.config.js:

  {
    test: /\.css$/,
    use: extractCSS.extract(
    {
      fallback: 'style-loader',
      use: [{
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () => [
              require('autoprefixer')({}),
              require('postcss-discard-empty')({}),
              require('postcss-discard-comments')({}),
              require('postcss-color-function')({}),
              require('postcss-flexbugs-fixes')({}),
              require('cssnano')({
                preset: ['default', {
                  discardComments: {
                    removeAll: true,
                  },
                  colormin: false,
                  cssDeclarationSorter: false,
                }],
              }),
            ],
          },
        },
      ],
    }),
  },

Кажется, что минификация работает.Я мог бы найти некоторые повторяющиеся правила CSS, присутствующие в CSS, как показано ниже

CSS

Мне интересно, является ли это проблемой с моей конфигурацией или инструментами, которые я использую?используя (PostCss и CssNano)

Спасибо.

1 Ответ

0 голосов
/ 29 сентября 2018

Это происходит потому, что у вас есть CSS minifier (cssnano), равный postcss-loader.Загрузчики применяются к каждому отдельному файлу, в результате cssnano не видит другие файлы для удаления дубликатов между файлами.

Используйте mini-css-extract-plugin .Этот плагин также использует cssnano.Но он вызывает cssnano после объединения каждого файла в один большой пакет.В результате cssnano увидит все CSS вместе и сможет удалить дубликаты по всему пакету.

...