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

  "name": "Name",
  "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'
});

[simonswiss]

Hey - are you able to share the codebase here?

[mdrahiem]

@simonswiss Thanks for your reply but its resolved. :)

[mdrahiem]

It's linked to the below issue.
#3037