Webpack 5 Tailwind bundle too large

Issue

This Content is from Stack Overflow. Question asked by Jnr

I have a stand-alone webpack application who’s only job is to bundle s|css. The output javascript file acts as the main style for the rest of the micro-service architecture.

webpack config:

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");

module.exports = webpackConfigEnv => {

  const defaultConfig = singleSpaDefaults({
    orgName: "stt",
    projectName: "styleguide",
    webpackConfigEnv
  });

  return merge(defaultConfig, {
    module: {
      rules: [
        {
          test: /.(s(a|c)ss)$/,
          use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
        }
      ]
    },
  });
};

I have imported a minified version of tailwind from my .scss (about 3MB in size) using npx tailwindcss -o build.css --minify.

@import "tailwind.min.css";

postcss.config:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('./tailwind.config.js'),
    require('autoprefixer')
  ],
};

After bundling, the ouput javascript is over 7MB in size.

How do I get the bundle size smaller?



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?