Devtool is not necessary

I was working on a frontend project some months ago. The project was a microfrontend that was meant to be integrated on a legacy dashboard.

The reason for the microfrontend approach was to reduce the complexity on the dashboard. I was excited at this challenge and I plunged into it.

I setup the microfrontend using webpack, react and typescript. I used chakra ui as the CSS-IN-JS framework, axios for API integration and everything worked fine. However, the build size of the project was about 14mb. For a microfrontend, that was ridiculously large. This led to a very slow page response in the dashboard where it was integrated. So I was presented with a new challenge to optimize the build.

I thought the build was that large because I used a CSS-IN-JS framework for the styling. So I refactored the entire codebase from chakra-ui to sass. Guess what, the build size increased from 14mb to about 21mb ??.

That was when I knew that the issue is not about the css library or the code but about the webpack config. I started a lot of trial and error with the webpack config. I then discovered that when I removed the devtool, the build size went from 14mb to about 600kb. Then I checked the webpack documentation about devtool. I realized it is not compulsory. More info here:.

Here's a sneak peek into my webpack config

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  devtool: "eval-source-map", //remove devtool
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

In summary, the solution to the problem I encountered was fixed by just removing one line of code.

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

Thanks for reading. I hope you find this helpful.

The above is the detailed content of Devtool is not necessary. For more information, please follow other related articles on the PHP Chinese website!