main.js file size is 37.1 MiB in development

[mdrahiem]

Hello there,

I've setup a react project from scratch and installed tailwind css in it. I am unable to figure out why the file size is gone too high after this. Below are my configurations.

package.json

  "version": "1.0.0",
  "description": ",
  "main": "index.js",
  "scripts": {
    "start": "npm run watch:css && webpack-dev-server --mode development --open --config ./webpack.dev.js",
    "build": "npm run build:css && webpack --mode production --config ./webpack.prod.js",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-transform-runtime": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^4.3.0",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^4.5.0",
    "path": "^0.12.7",
    "postcss-cli": "^8.1.0",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.3.0",
    "tailwindcss": "^1.8.12",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.4.0"
  },
  "dependencies": {
    "@reach/router": "^1.3.4",
    "axios": "^0.20.0",
    "chart.js": "^2.9.3",
    "immutable": "^4.0.0-rc.12",
    "lodash": "^4.17.20",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.10.0",
    "react-copy-to-clipboard": "^5.0.2",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-table": "^7.6.0",
    "react-toastify": "^6.0.9",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "web3": "^1.3.0"
  }
}

tailwind.css

@tailwind components;

@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

tailwind.config.js

  purge: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx'
  ],
  theme: {
    extend: {
      colors: {
        'brand-green': '#AAEC2D',
        'brand-green-dark': '#7ABA00',
        'brand-green-200': '#eefbd5'
      },
      fontFamily: {
        display: ['Space Mono'],
        body: ['Rubik']
      }
    }
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active']
  },
  plugins: []
}

webpack.common.js

const HtmlWebPackPlugin = require('html-webpack-plugin');

const baseURL = path.resolve(__dirname, '');

module.exports = {
  entry: path.resolve(baseURL, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.(?:sc|c)ss$/i,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve( __dirname, 'public/index.html' ),
      filename: 'index.html',
      inject: 'body',
    })
  ]
};

webpack.dev.js

const common = require('./webpack.common');

module.exports = merge(common, {
  devServer: {
    historyApiFallback: true
  },
  devtool: 'inline-source-map',
  mode: 'development'
});

[RobinMalfait]

Hey! Thank you for your issue report! Much appreciated! 🙏

Do you mean that you get a size of 3.71 MiB or really 37.1 MiB?

Because when I test it with your tailwind.config.js file, I get a 3.67MB which makes sense because I am using tailwindcss the cli directly so there is currently no sourcemapping going on.

Can you verify that it is 3.71 MB or 37.1 MB?

Because if it is 3.71 MB, that 's expected.

[mdrahiem]

First of all thanks much for your reply.

Yes. Unfortunately its 37.1 MiB. Please check the screenshot below.

If it is 3.71 MB then I shouldn't have any problem but as it is 37.1 MiB whenever I do some change in my code, hot reloading takes atleast 3-4 seconds of time and then the browser gets refreshed :(

[RobinMalfait]

Can you create a (minimum) repo that reproduces this behaviour? That way I can look into it.

The files you mentioned above are sometimes incomplete, and not all the required files are there.

[mdrahiem]

I've created a simple repo (basic structure). https://github.com/mdrahiem/simple-react-redux-tailwind-app

After this basic set-up I see main.js file size is 22.5 MiB.

One more small thing. When I've changed devtool: 'inline-source-map', --> devtool: 'source-map', in webpack.dev.js file I see main.js file size got decreased to 8.25 MiB which is also very high. Could you please suggest me if the setup is correct? or please let me know If I need to do any modifications.

[RobinMalfait]

Hey! You are using ./assets/main.css inside your src/index.js https://github.com/mdrahiem/simple-react-redux-tailwind-app/blob/master/src/index.js#L4. I am not sure why you even have that file, but that looks like a super big final generated file which is incorrect and strange.

Anyway, if you delete that file and in your src/index.js you replace import './assets/tailwind.css' with import './assets/tailwind.css' (the file with the 3 directives in it) OR with import "tailwindcss/tailwind.css" (this way you can also delete the ./assets/tailwind.css file, you will get the expected result.

This in combination with the devtool for sourcemaps fix, results in a 1.65 MiB main.js file on my machine which is an expected file size for development.

[mdrahiem]

@RobinMalfait First of all thanks much for your time. But the problem is not fixed. If I replace ./assets/main.css with './assets/tailwind.css' then the styles are no applied to the page (styles are broken). Otherwise when I try to use import "tailwindcss/tailwind.css" its throwing an error.

[RobinMalfait]

You have to add the postcss-loader for webpack, currently you are not using postcss. If you want to use @import "tailwindcss/tailwind.css" then you probably also want a nesting plugin https://tailwindcss.com/docs/using-with-preprocessors

Alternatively, to the nested plugin, you can use this:

/* ./src/assets/tailwind.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';