search

logui-framework / server

The server component of LogUI, a framework-agnostic JavaScript library for logging user interactions on webpages.
https://github.com/logui-framework/server/wiki
16 stars 3 forks source link

JavaScript compressor issue #1

Open maxwelld90 opened 3 years ago

maxwelld90 commented 3 years ago

Case in point: when we attempt to include react-plotly.js (which spits out huge output files!), and try and compress the JavaScript with compressor.filters.jsmin.JSMinFilter and compressor.filters.jsmin.CalmjsFilter, compression fails. When we remove compressor.filters.jsmin.CalmjsFilter, it compiles (allegedly having compressed things down), but does not work in the browser. The compression is not working correctly in some instances.

So is there a configuration issue with the compressor, or do we just need to find a new compressor?

Look for COMPRESS_JS_FILTERS in worker/worker/settings/base.py.

maxwelld90 commented 3 years ago

So it seems like the django-compressor code is messing everything up. There's a problem in there with larger modules (over 2-3MB in size), and it seems to spit out incorrect code when we try apply a filter to minify it.

The solution seems to be to completely skip the django-compressor COMPRESS_JS_FILTERS filters, and just minify it using the minify command.

  1. Ensure that minify is globally installed. Do this with npm install minify -g. We can add minify to line 29 of the Dockerfile for the worker.
  2. Remove all COMPRESS_JS_FILTERS from the base.py settings module for the worker.
  3. Alter the COMPRESS_PRECOMPILERS setting. Change the module tuple to the following.

('module', 'browserify {infile} -t babelify | minify --js > {outfile}'),

This should then mean that instead of passing the compression job to django-compressor, we do it directly by piping the output of babelify straight to minify, which then saves its output to the specified output file.

That should work! Tested on the fork by @hjpvandijk for his project. The 9MB JS file was reduced to 4MB. And it works fine in the browser. So I am pretty happy that this solution seems to work, unless we can find a further issue with it.