How I reduced Raveberry's transferred frontend code by 90%

1

Yarn

The external dependencies were downloaded into the static/ folder containing all frontend assets using yarn and a package.json. Other than that, yarn was not used. Next I ran a bash script that removed all files I did not need, keeping the javascript, css and font files that should be served. In html, these files where directly included. I knew that loading many files is bad, so I used django-compressor to combine them into one big file. Conveniently, this tool also provided me with a way to compile scss.

#Front End Package Manager #Package Manager #JS Build Tools 106 social mentions

2

Webpack

To bring everything together, I use webpack to create the final bundle. It takes care of including the necessary libraries and minifies the output. I tried to use rollup but there were issues when importing only parts of jquery-ui. The final bundle.js has a size of 272KB. This is still not ideal, but since the functionality is basically identical, I consider it quite an achievement. The next step would probably be to replace jquery and jquery-ui with more lightweight alternatives.

#Web Application Bundler #JS Build Tools #Module Bundler 219 social mentions

3

Purgecss

Bootstrap provides css rules for a lot of html elements. Instead of serving all of it, purgecss is used to only include the necessary rules. The tool sifts through every html template and all javascript files to detect used identifiers. Everything else is removed from the resulting file, drastically reducing its size. I only had to manually prevent a few dynamically created identifiers from being removed.

#Developer Tools #Development #Design Tools 33 social mentions

4

PostCSS

Afterwards, a postcss pass minifies the css code, resulting in 21,8KB per light/dark style. In comparison to the naive approach, this amounts to almost 90% reduction.

#Developer Tools #Design Tools #CSS Framework 39 social mentions

5

jQuery UI

Analyzing these dependencies, I found that some of them could be reduced or replaced. For example, jquery-ui is used for autocompletion and reordering. All additional widgets provided by jquery-ui (e.g. sliders, datepickers) are dead weight and can be excluded from the final bundle. Another example is marked, which was used to render the changelog. However, the changelog has a very simple structure and does not require a ~300KB library to be parsed. So instead, I use snarkdown, a lightweight alternative which is fully sufficient for this application.

#Development Tools #Javascript UI Libraries #JavaScript Framework 12 social mentions

6

Snarkdown

Analyzing these dependencies, I found that some of them could be reduced or replaced. For example, jquery-ui is used for autocompletion and reordering. All additional widgets provided by jquery-ui (e.g. sliders, datepickers) are dead weight and can be excluded from the final bundle. Another example is marked, which was used to render the changelog. However, the changelog has a very simple structure and does not require a ~300KB library to be parsed. So instead, I use snarkdown, a lightweight alternative which is fully sufficient for this application.

#Competitive Intelligence #Data Profiling #Resource Profiling And Monitoring 1 social mentions