Блог

Итак, у меня есть next.js приложение и его использование сторонней библиотеки компонентов, которую мы создали самостоятельно.

Я замечаю, что на некоторых страницах есть тонна неиспользуемого css, потому что в файлах scss мы используем целые системы сетки/интервалов… даже если мы просто используем один или два класса из них… весь пакет проходит.

Наша библиотека компонентов использует накопительный пакет.

Итак, в качестве примера на наших страницах у нас может быть файл header.module.scss, в котором используются некоторые классы из библиотеки компонентов ala…

 @import '~styleguide/build/variables'; @import '~styleguide/build/mixins'; @import '~styleguide/build/gridClasses'; @import '~styleguide/build/spacingClasses'; @import 'src/styles/typography'; @import 'src/styles/mixins';  

Итак, я думаю, что происходит то, что мне может понадобиться (на рассматриваемой странице) только 1 элемент интервала или 1 класс сетки … и т. Д. Все это упаковывается.

Итак, я использую PostCSS в next.js ала…

 const isProduction = process.env.NEXT_PUBLIC_APP_STAGE === 'production';  module.exports = !isProduction ? {  plugins: [] } : {  plugins: [  "postcss-flexbugs-fixes",  [  "postcss-preset-env",  {  autoprefixer: { flexbox: "no-2009" },  stage: 3,  features: { "custom-properties": false }  }  ],  [  "@fullhuman/postcss-purgecss",  {  content: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],  defaultExtractor: (content) =gt; content.match(/[w-/:] (?lt;!:)/g) || [],  safelist: ["html", "body"]  }  ]  ]  };  

Но это действительно не очень помогает. Есть какие-нибудь мысли о том, как это решить?