Minifikacja css w webpacku

0

Cześć

Potrafię już zrobić jeden plik wynikowy z wielu plików .scss
Problem w tym że mój plik** style.css **nie ma usuniętych enterów i spacji a także ma wiele niepotrzebnych klas.
Użyłem dwóch klas z bootstrapa a teraz wszystkie ~3000 mam zaciągnięte do style.css
Szukałem narzędzia które wywaliło by niepotrzebne klasy i zmniejszyło kod.
Znalazłem optimize-css-assets-webpack-plugin ale zupełnie nie potrafię zrobić tak żeby to działało.

Oto mój webpack.config.js :

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./js/index.js",
  mode: "production",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.s?[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } },
          { loader: "sass-loader", options: { sourceMap: true } }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    }) 
  ]
};

Jak zrobić żeby było dobrze?

0

PostCSS potrafi robić takie bajery jak porządna minifikacja - rzuć okiem na niego.

0

A skąd kod ma wiedzieć które klasy są używane przez ciebie? o ile lecisz na statycznym html to powiedzmy, ze by dał rade ale wszędzie gdzie generuje się dynamicznie czasem nawet na podstawie danych z sql to ci tego nie ma jak ogarnąć.
Więc podsumowując, minimalizacja css to:

  • połączenie plików w jeden lub kilka w zależności od ustawień (wbrew pozorom kilka plików często jest optymalniejsze)
  • usunięcie białych znaków
  • scalenie kilku deklaracji tej samej klasy w jedną deklarację
  • kompilacja sass/scss do css

Jak chcesz mieć mniej klas z bootstrapa to musisz sobie takie style bootstrapowe minimalne sam wygenerować z ich generatora.

0

Zasadniczo bootstrap css gzip to 25kb, więc nie wiem co tam takiego niesamowitego urwiesz.

1 użytkowników online, w tym zalogowanych: 0, gości: 1