Minify JS with source map

[almarklein]

@Korijn commented on Fri Sep 09 2016

To reduce JS size and increase page load times, you can use projects like UglifyJS to minify JS and let it output sourcemaps to continue to provide a pleasant debugging experience.

• https://github.com/mishoo/UglifyJS2
• http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

There are many ways to do it, but it can be very simple:

var result = UglifyJS.minify({"file1.js": "var a = function () {};"}, {
  outSourceMap: "out.js.map",
  fromString: true
});

// or

var result = UglifyJS.minify([ "file1.js", "file2.js", "file3.js" ], {
  outSourceMap: "out.js.map"
});

---

@almarklein commented on Sun Sep 11 2016

The problem with these is that they rely on nodejs, and I don't want to make that a dependency of Flexx. Ideally we'd use a pure-Python minifier (Flexx includes a very minimalist one that removes comments etc. but keeps the code readable (because it does not do sourcemaps). Another option might be to make nodejs an optional dependency.

---

@almarklein commented on Sun Sep 11 2016

Maybe there is stuff that we can use from https://github.com/django-compressor/django-compressor/tree/develop/compressor

---

@almarklein commented on Sun Sep 11 2016

Another option is to generate minified JS by the parser itself. It already has AST, so it should be well-capable to e.g. shorten variable names.

---

@Korijn commented on Sun Sep 11 2016

Did you see the section "Building for the browser"? http://lisperator.net/uglifyjs/ Maybe you can vendor it?

---

@almarklein commented on Sun Sep 11 2016

But then Flexx would first need to spin up a (local) browser send it the JS, get the JS back, and then spin up the actual browser with the app?

---

@Korijn commented on Sun Sep 11 2016

You raise a good point! I stand corrected. :)

---

@almarklein commented on Wed Nov 15 2017

Source maps explanation: https://www.schneems.com/2017/11/14/wtf-is-a-source-map/