DEV Community: akinloludavid

How I reduced my app size from 14mb to 600kb

akinloludavid — Fri, 06 Sep 2024 20:37:09 +0000

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 CSS frameworks you should know.

akinloludavid — Sat, 13 Nov 2021 18:10:49 +0000

Firstly, what is a framework? A framework is essentially a platform that allows developers to build things faster. Here are some key things to know about frameworks in general

A framework allows you to build softwares without having to code from scratch.
It is basically a pre-written program that you can build upon as a developer.

Most programming languages have their own framework (Javascript especially) but for this post, we would be learning about CSS frameworks.

Writing plain CSS while building a small web project can be fun. However when the application becomes bigger and more sophisticated, plain CSS can be extremely stressful. Your best bet would to use a CSS framework. Here are some advantages of using CSS frameworks.

Faster development
Cross browser functionality
Enforces standard web design patterns and styles.

There are many CSS frameworks out there, however in this post I have curated top 5 CSS frameworks to learn in 2021.

Bootstrap - Bootstrap is the most popular HTML, CSS and Javascript framework for developing nice looking websites that are responsive and mobile friendly. Bootstrap comes with it's own components like navbar, carousel, buttons etc. It was developed by twitter in 2011 and it is currently in version 5. You can visit bootstrap official website to learn more. Their documentation is very explanatory. Top companies like twitter, walmart use bootstrap for their web applications.
Tailwind - Tailwind is a utility-first CSS framework. Unlike other CSS framework that come with their pre-defined components, Tailwind enables you to create your own bespoke designs easily. Top companies like hashnode, livestorm, Superchat, Hubblr use Tailwind css.
Foundation - Foundation is also a very advanced CSS framework that comes with a bunch of in-built components and also some animations. It is highly responsive design and mobile friendly. Accenture, Nubank are companies that use foundation.
Bulma CSS Bulma - is a CSS framework based on CSS flexbox. It also has a lot of in-built components that you can use. One distinct feature of Bulma is that it comes in a lightweight weight structure that allows you to only import the components you need. Companies like Django, Rubrik used Bulma CSS
Materialize CSS Materialize is a CSS framework developed by Google with HTML, CSS and Javascript. It contains a lot of engaging components that can accelerate frontend development and enhance user experience. It is also known as Material Design.

NB: There are a bunch of other CSS frameworks out there like Purecss, skeleton, ant design etc. This article is just to show you some of the most relevant ones. Also, you don't have to know everything. Knowing one or two is fine. You can always pick up others to learn if a project demands it.

You should have a considerable understanding of CSS before you start learning any framework

If you find this article helpful, kindly let me know in the comment and don't forget to like.✌🏾

Dealing with Bugs as a Novice Frontend Developer

akinloludavid — Wed, 10 Nov 2021 23:58:21 +0000

If debugging is the process of removing software bugs, then programming must be the process of putting them in. - Edsger Dijkstra

That is just a funny quote I grabbed from here

A bug is simply an error that is making a computer program misbehave.

Learning frontend development can be quite fun (when your code is working the exact way you want) but often times, it just doesn't work that way. You are bound to face bugs at some point in your learning journey. Even Senior Developers encounter bugs so who are you😂.

As a newbie, bugs can frustrate you to the extent that you might just want to quit coding but the point is that is how you will learn.

So here are a few things you can do when you face bugs

Use Google - All programmers actually use google. If you are getting an error message of some kind, you can just copy the error message and paste it on google. There is a 100% chance that someone has faced the same problem you are facing and another person has provided the solution to the problem. The trick is that using google can be overwhelming because you get a lot of search results.So as a frontend developer, when you use google to debug, there are some likely websites you can get your solutions from
- stackoverflow.com
- w3schools.com
- developer.mozilla.org (MDN)
- dev.to
- medium.com etc
Ask a senior colleague - This is probably the fastest way to fix a bug because you are asking a real person that has probably faced the same issue you are facing. Although, this can be a little difficult because most people self-learn. A quick fix to this would be to join coding communities so you can learn with other developers. Examples of some coding communities you can join include:
- stack overflow,
- women who code,
- freecodecamp,
- hashnode etc.

Thanks for reading. I wish you the best in your learning journey. Kindly let me know your thoughts in the comments section. You can also subscribe to my posts if this actually helped you.