Frontend Code Optimization
Optimization techniques
Code optimization techniques are a series of tasks that the build tool, bundler or even the developer will perform to reduce the size of the application code. Some are automated and some are manual, or require pre-configuration or the installation of additional plugins.
Code splitting
Code splitting allows you to break the application code into chunks, so we can load them asynchronously or on demand, using loading techniques like dynamic imports or prefetching or preloading, some of which I mentioned before. Depending on the implementation, we can also leverage a given framework’s routing mechanism to load chunks at specific routes.
Deduplication
Deduplication or deduping refers to techniques we can use to prevent fetching the same dependency multiple times. This is particularly useful when we have a dependency graph that has multiple versions of the same dependency.
Tree shaking
Tree-shaking is an automated step that occurs at buildtime. Via tree-shaking, the software in charge of bundling the application code will implement mechanisms to exclude functions that are not used.
Mechanisms may differ, but typically tree-shaking relies on some form of detection of unused exports and pure functions, that have no side effects.
Even when the process is automated and depends on the tool -ie: webpack may implement tree-shaking in a way and Vite in a another-, we can use best practices to optimize tree-shaking, like naming our functions instead of using anonymous functions, or manually marking a file as side-effect free, that will help the bundler detect unusued exports and functions.
Dead code elimination
Dead code elimination is manually performed as a result of using browser plugins or other tools, to verify code coverage, or what code is actually used at runtime, and then removing it from the codebase or the bundle.
Minification
Once the code is ready to be shipped and sent over the network, it should also be minified -meaning removing all unnecessary chracters from the text based files-, and then compressed, -meaning rewriting the binary format file, to reduce the size-.
There are different compression tools that use different algorithms and result in larger or smaller sizes. -Think gzip, br (brotli), etc-