This content originally appeared on DEV Community and was authored by akinloludavid
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.
This content originally appeared on DEV Community and was authored by akinloludavid
akinloludavid | Sciencx (2024-09-06T20:37:09+00:00) Devtool is not necessary. Retrieved from https://www.scien.cx/2024/09/06/devtool-is-not-necessary/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.