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.
Top comments (0)