Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-44134

Release blue ocean javascript minified sources

    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Major Major
    • blueocean-plugin
    • None

      React dev tools now warn if a website is using dev mode or shipping sources that are minified. As you can see in the picture, react dev tools detect an unminified version of the source. 

      Jenkins should ship with minified sources and the relevant source maps.

       

          [JENKINS-44134] Release blue ocean javascript minified sources

          Michael Neale added a comment -

          Need to get some comment from tfennelly on this with how bundling is today

          Michael Neale added a comment - Need to get some comment from tfennelly on this with how bundling is today

          Keith Zantow added a comment -

          This is a good idea, and some progress has been made on it but there are some other complications to solve first.

          Keith Zantow added a comment - This is a good idea, and some progress has been made on it but there are some other complications to solve first.

          Michael Neale added a comment -

          Yes the complications are that plugins are dynamicaly loaded and contribute javascript at runtime (and other things). The minifiers aren't yet aware of this so they erase things that are needed. 

          Michael Neale added a comment - Yes the complications are that plugins are dynamicaly loaded and contribute javascript at runtime (and other things). The minifiers aren't yet aware of this so they erase things that are needed. 

          Tom FENNELLY added a comment -

          Yes, I remember us having some issues wrt minifying the code, but I forget the exact details. My current work on bundling is only happening in my own spare time, which isn't a lot. Iow ... not sure when I'll get a chance to look at this.

          Tom FENNELLY added a comment - Yes, I remember us having some issues wrt minifying the code, but I forget the exact details. My current work on bundling is only happening in my own spare time, which isn't a lot. Iow ... not sure when I'll get a chance to look at this.

          Two important points that can solved without having to solve "minification removing useful code". First is to minify all code without dead-code elimination. As it stands right now, everything is un-minified and minifying it (even without dead-code elimination) will make it load and run faster, as JS engines gets less to do.

          Second point is to minify (or otherwise process) React with NODE_ENV environment variable set to production, so you get a production build of React. That will make Blueocean feel a lot snappier and generally run faster as well, as right of now, you're running a development build of React in production.

          Victor Bjelkholm added a comment - Two important points that can solved without having to solve "minification removing useful code". First is to minify all code without dead-code elimination. As it stands right now, everything is un-minified and minifying it (even without dead-code elimination) will make it load and run faster, as JS engines gets less to do. Second point is to minify (or otherwise process) React with NODE_ENV environment variable set to production, so you get a production build of React. That will make Blueocean feel a lot snappier and generally run faster as well, as right of now, you're running a development build of React in production.

          I'd love to help with this issue, but can't find the entry-point where the bundling/building is happening on Github

          Victor Bjelkholm added a comment - I'd love to help with this issue, but can't find the entry-point where the bundling/building is happening on Github

          Michael Neale added a comment - - edited

          victorbjelkholm oh that would be great if you are interested in having a crack at at this. I am probably not the best person to explain (kzantow or cliffmeyers would be) but I can try to give you some pointers that may show where to start. 

          Firstly note that the "front end maven plugin" is used to trigger all the npm builds: https://github.com/eirslett/frontend-maven-plugin

          Then note that https://github.com/jenkinsci/js-builder is the infrastructure that is used to build the stuff for each plugin. npm is still being used, gulp, bundler, babel etc - but they are orchestrated by those. 

          One trick with this is that each plugin gets its own js bundle, and they are loaded up at runtime. Blue ocean is made up of several plugins (and there can be external plugins) - its kind of arbitrary code splitting if you think of it that way. 

          Each plugin has its own package.json as you can see - and the bundle script is used, eg: https://github.com/jenkinsci/blueocean-plugin/blob/master/blueocean-dashboard/package.json - whilst npm is not called directly, the maven front end plugin will call it (in which case it just delegates to gulp). In that blueocean-dashboard plugin, the gulpfile is here: https://github.com/jenkinsci/blueocean-plugin/blob/master/blueocean-dashboard/gulpfile.js which I believe really delegates to the js-builder gulpfile (https://github.com/jenkinsci/js-builder/blob/master/gulpfile.js) - perhaps at that level a minified bundle could be made (as long as it doesn't remove code or change things in a way that it can't be loaded at runtime). 

           

          Not sure if I have confused things at all... but does that make any sense? 

           

          Reading through https://github.com/mishoo/UglifyJS2 - I wonder if using something like that with "mangle" set to false (default is true) and "keep_fnames" set to true (default is false) maybe it would generate bundles that just work? (probably quite a few other options may need to be tweaked)

          Michael Neale added a comment - - edited victorbjelkholm oh that would be great if you are interested in having a crack at at this. I am probably not the best person to explain ( kzantow or cliffmeyers would be) but I can try to give you some pointers that may show where to start.  Firstly note that the "front end maven plugin" is used to trigger all the npm builds: https://github.com/eirslett/frontend-maven-plugin Then note that https://github.com/jenkinsci/js-builder  is the infrastructure that is used to build the stuff for each plugin. npm is still being used, gulp, bundler, babel etc - but they are orchestrated by those.  One trick with this is that each plugin gets its own js bundle, and they are loaded up at runtime. Blue ocean is made up of several plugins (and there can be external plugins) - its kind of arbitrary code splitting if you think of it that way.  Each plugin has its own package.json as you can see - and the bundle script is used, eg: https://github.com/jenkinsci/blueocean-plugin/blob/master/blueocean-dashboard/package.json  - whilst npm is not called directly, the maven front end plugin will call it (in which case it just delegates to gulp). In that blueocean-dashboard plugin, the gulpfile is here: https://github.com/jenkinsci/blueocean-plugin/blob/master/blueocean-dashboard/gulpfile.js  which I believe really delegates to the js-builder gulpfile ( https://github.com/jenkinsci/js-builder/blob/master/gulpfile.js)  - perhaps at that level a minified bundle could be made (as long as it doesn't remove code or change things in a way that it can't be loaded at runtime).    Not sure if I have confused things at all... but does that make any sense?    Reading through https://github.com/mishoo/UglifyJS2  - I wonder if using something like that with "mangle" set to false (default is true) and "keep_fnames" set to true (default is false) maybe it would generate bundles that just work? (probably quite a few other options may need to be tweaked)

          Thanks michaelneale for that write-up! While I've been unable to pick this up yet, I appreciate the help and hope that I can look into this soon.

          Victor Bjelkholm added a comment - Thanks michaelneale for that write-up! While I've been unable to pick this up yet, I appreciate the help and hope that I can look into this soon.

            Unassigned Unassigned
            mleonard87 Mike Leonard
            Votes:
            1 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated: