DEV Community: José Miguel

Bundle's Size: an insight

José Miguel — Tue, 24 Sep 2019 17:26:23 +0000

I don’t know if there are enough articles on how to optimize the bundle’s size, in almost everyone I’ve seen i find something else to add to my pipeline and that is why i want to start with the conclusion I reached.

A bundle is a set of assets grouped based on a dependency analysis deduced from the source code (imports) which solves the problem of integrating the dependencies in a project. Having a range of assets, different in type and functionality, some included explicitly in the code and others implicitly that help the development process (webpack, react, dev mode) it is evident that the complexity is proportional to the size of the bundle .

The final product is not only the content, it also includes the interaction experience and this begins when the user decides to click the link and awaits for the response. Although the bundle simplified the complexity of the dependencies, it is necessary to realize some assumptions to improve this experience, such as that all the code must be present at the same time (splitting), or that must be loaded sequentially (parallelism) and finally that source code must be pretty and understandable (minify).

In summary, i found 4 main areas which group the actions needed to reduce a bundle’s size

delete: redundant or sub utilized code
extract: assets favoring paralelization
divide: group only the code needed
optimize: each asset, according to its type

Problem

I made a simple SPA to show some projects and then hosted it on github, I needed to add some dynamic components to the page so I used ReactJS to implement it with portals. My point is why something so simple was so big:

app.js 586.6KB
  2.js 377.3KB
  3.js  45.7KB
--------------
     1,009.6KB

polyfill.js  93.1KB

This is page’s image and it requires almost 1MB of code without counting the HTML, CSS and images. My hypothesis is that “the bundle is packing code that it does not use” so I started to investigate a little and reduce each part involved (although in this post I will focus on the javascript code)

The final result, after reviewing the bundle was:

    app.js 481.9KB
    --------------
           481.9KB

    polyfill.js  92.9KB

which represents a 48% of the original size and although the hypothesis was correct it just describes only a part of the problem.

Analysis and Tools

To start I needed to see the bundle’s composition

webpack

It generates a file with the dependency graph and the assets list, quite big and in json format, has a lot of information but it’s not so manageable

webpack --profile --json > stats.json

webpack-bundle-analyzer

it analyzes the dependency graph generated by webpack, good for visualizing the composition but not detailed enough

    # package
    npm install webpack-bundle-analyzer -g

    # analyze, generate report
    webpack-bundle-analyzer stats.json

source-map-explorer

very similar to the previous one, not so colorful, but with a better level of detail

source-map-explorer script.js

bundle-stats

provides the most complete list of assets included in the bundle, it is more like a visualization tool for stats.json

Solution

now, with the bundle’s composition information

1. react-dom.development.js

changed the mode to production in webpack.config.js

mode: 'production'

all - 2.82MB 
app - 2.58MB 
polyfill - 248.1KB

2. moment.js -> date-fns

The library moment.js, despite of being quite complete is quite big. I replaced it with date-fns.

all - 2.32MB 
app - 2.08MB 
polyfill - 248.1KB

3. clean unused code

after a quick review of dead code in some components i had to remove some unused imports left

all - 2.27MB 
app - 2.02MB 
polyfill - 248.1KB

4. helmet -> document.title

i used helmet just for the page title so i changed it for document.title = “title”

all - 2.22MB 
app - 1.98MB 
polyfill - 248.1KB

5. axios -> fetch

I used axios just for server requests and that could be easily replaced by fetch

all - 2.03MB 
app - 1.79MB 
polyfill - 248.1KB

6. lint fixes

all - 2.03MB 
app - 1.79MB 
polyfill - 248.1KB

7. removing javascript-time-ago

I am working on a framework that I have been building over time and at some point in time I used this functionality which can be replaced by date-fns too

all - 1.62MB 
app - 1.38MB 
polyfill - 248.1KB

8. material-ui

it would be a highly cost refactor, I just upgrade the package to the latest version hoping that the devs behind the library were also doing their thing in this matter

9. react -> preact

changing react for preact? it sounds good although the migration process was a little buggy

all - 1.51MB 
app - 1.27MB 
polyfill - 248.1KB

10. remove hot loader and development dependencies

11. extracting assets: css, fonts, images

webpack - mini-css-extract-plugin

all - 1.43MB 
app - 1.19MB 
polyfill - 248.1KB

12. dynamic loading

const { FixedSizeList } from 'react-window'; 

const { FixedSizeList } = Loadable({
   loader: () => import('react-window'),
       loading: Loading,
}); 

const FixedSizeList = Loadable({
   loader: () => import('react-window/FixedSizeList'),
       loading: Loading,
});

13. targeting

devtool: false,
target: "web", 
externals: {
 React: 'react'
}

14. minimize

Terser

Summarizing, I categorized the previous 14 points as follows

delete

development support

react-dom.development.js
removing hot loader

refactoring

moment.js
helmet
axios
javascript-time-ago
material-ui
react

code review

unused code
linting

extract

css, images, fonts

divide

Dynamic loading

react-window
optimizations chunks

optimize

targeting and minimizing

This far the list for today, I am aware that it can be more extensive. I would like to know which other points you recommend taking into account.

References

Bundle Size: insight

José Miguel — Mon, 23 Sep 2019 21:30:31 +0000

No se si hay suficientes artículos de como optimizar el tamaño del bundle, en casi todos los que he visto encuentro algo más para agregar a mi proceso y es por eso que quiero empezar con la conclusión a la que llegué.

El bundle es un conjunto de assets agrupados en base a un análisis de dependencias deducido del código fuente (imports) que resuelven el problema de la integración de las dependencias de un proyecto. Teniendo una gama de assets distintos, tanto en tipo como en funcionalidad, algunos incluidos explicitamente como en el código y otros implicitos que ayudan al proceso de desarrollo (webpack, react, dev mode) es evidente que la complejidad sea proporcional a la dimensión del bundle.

El producto final no es unicamente el contenido también incluye la experiencia de interacción y esta empieza cuando el usuario decide darle click al link y espera su respuesta. Si bien el bundle simplificó la complejidad de las dependencias, es necesario evidenciar unas suposiciones para mejorar la experiencia, como la que todo el código debe estar presente al mismo tiempo (splitting), o que deba cargarse secuencialmente (paralelismo) y por último que los fuentes sean bonitos y entendibles (minify).

En resumen, mi conclusión es que para reducir el bundle se deben tomar acciones en estas cuatro areas:

eliminar: código redundante o sub utilizado
extraer: assets y favorecer la paralelización
dividir: agrupar solo el código necesario
optimizar: cada uno de los assets, según su tipo

PROBLEMA

Hice una SPA simple para presentar unos proyectos y la hospedé en github, necesitaba agregar unos componentes dinámicos a la página por lo que use ReactJS implementándolo por medio de portales. La cuestión es que para ser algo tan simple era demasiado pesado:

app.js 586.6KB  
  2.js 377.3KB  
  3.js  45.7KB  
--------------  
     1,009.6KB

polyfill.js  93.1KB

Esta es la foto de la página y requiere de casi 1MB de código sin contar el HTML, CSS, imágenes. Mi hipótesis es “el bundle está empacando código que no utiliza” por lo que me puse a investigar un poco y a reducir cada una de las partes involucradas (aunque en este post me enfocaré en el código de javascript)

El resultado final, luego de revisar el bundle fue:

app.js 481.9KB  
--------------  
       481.9KB

polyfill.js  92.9KB

lo cual representa un 48% del tamaño del original y aunque la hipótesis era correcta era solo una parte del problema.

ANÁLISIS Y HERRAMIENTAS

Para empezar necesitaba ver la composición del bundle

WEBPACK

permite generar un archivo con el grafo de dependencias y assets, bastante grande y en json, mucha información pero poco manejable

webpack --profile --json > stats.json

WEBPACK-BUNDLE-ANALYZER

analiza el grafo de dependencias que genera webpack, bueno para visualizar el conjunto pero no tan bueno para el detalle

# package

npm install webpack-bundle-analyzer -g# analyze, generate report

webpack-bundle-analyzer stats.json

SOURCE-MAP-EXPLORER

muy parecido al anterior, no tan bonito, pero con un mejor nivel de detalle

source-map-explorer script.js

BUNDLE-STATS

Este brinda una lista completa de la composición del bundle, los assets y los paquetes incluidos, es una visualización del stats.json generado por webpack

SOLUCIÓN

Ya con la información de la composición

1. REACT-DOM.DEVELOPMENT.JS

cambiando el modo a producción en webpack.config.js

mode: 'production'

all - 2.82MB   
app - 2.58MB   
polyfill - 248.1KB

2. MOMENT.JS -> DATE-FNS

La biblioteca de moment.js a pesar de ser bastante completa es bastante grande, ademas de todas las localizaciones que incluye. La sustituí por date-fns.

all - 2.32MB   
app - 2.08MB   
polyfill - 248.1KB

3. LIMPIAR CÓDIGO NO UTILIZADO

Hice una revisión de código muerto en algunos componentes la cual fue dejando imports sin utilizar

all - 2.27MB   
app - 2.02MB   
polyfill - 248.1KB

4. HELMET -> DOCUMENT.TITLE

Utilizaba helmet unicamente para ponerle el título a la página, esto lo cambié por document.title = “title”

all - 2.22MB   
app - 1.98MB   
polyfill - 248.1KB

5. AXIOS -> FETCH

Para el manejo de la comunicación utilizaba axios pero la funcionalidad que requería podía ser cubierta por fetch.

all - 2.03MB   
app - 1.79MB   
polyfill - 248.1KB

6. LINT FIXES

all - 2.03MB   
app - 1.79MB   
polyfill - 248.1KB

7. ELIMINAR JAVASCRIPT-TIME-AGO

Estoy trabajando sobre un framework que he ido construyendo en el tiempo y en algún momento utilicé esta función la cual puede ser sustituida por date-fns

all - 1.62MB   
app - 1.38MB   
polyfill - 248.1KB

8. MATERIAL-UI

alto costo en refactor, solo actualice la versión esperando que los devs atrás de la biblioteca también estuvieran haciendo lo suyo en esta materia

9. REACT -> PREACT

cambiar react por preact? suena bien aunque el proceso me resultó con varios errores en la migración.

all - 1.51MB   
app - 1.27MB   
polyfill - 248.1KB

10. QUITAR HOT LOADER Y DEPENDENCIAS DE DEARROLLO

11. EXTRAER ASSETS: CSS, FUENTES, IMÁGENES