EclipseFdn / solstice-assets

Assets for the Eclipse Foundation look and feel called Solstice.
https://eclipsefdn-solstice-assets.netlify.app/
Eclipse Public License 2.0
1 stars 13 forks source link

Look into improving JS file size and performance on the page #225

Closed autumnfound closed 3 years ago

autumnfound commented 3 years ago

As we continue to develop the solstice theme, the JS file continues to grow. Whether this is from feature growth, shims for ES6 -> ES5, or changes in vendor libraries, our main JS bundle file continues to grow. In keeping the site modern, we should investigate ways of shrinking our files, removing old functionality that is no longer used, and potentially splitting vendor JS out from our JS bundle.

One of the gains we can get with compiling this file is splitting out the vendor files from the main JS file that is being transpiled. This has 2 different benefits for our files. The first benefit would be the reduction in size of the file that changes regularly on the server. While a pure split of the vendor JS wouldn't necessarily mean that file sizes change, the size of the file that would regularly change would be smaller as the larger, static vendor libraries would be in a different file that could have long-lived caches.

Example change to webpack.mix.js:

mix.scripts([
    './node_modules/jquery/dist/jquery.min.js',
    './node_modules/bootstrap/dist/js/bootstrap.min.js',
    './node_modules/jquery-match-height/dist/jquery.matchHeight-min.js',
    './node_modules/feather-icons/dist/feather.min.js',
    './node_modules/cookieconsent/src/cookieconsent.js',
    './node_modules/owl.carousel/dist/owl.carousel.min.js'],'docs/dist/js/vendor.js');
mix.js([
    './node_modules/jquery-eclipsefdn-api/dist/jquery.eclipsefdn-api.min.js',
    'js/eclipsefdn.videos.js',
    'js/eclipsefdn.render-rss-feeds.js',
    'js/solstice.cookieconsent.js',
    'js/solstice.cookies.js',
    'js/solstice.eventsmodal.js',
    'js/solstice.js',
    'js/solstice.donate.js',
    'js/eclipsefdn.adopters.js',
    'js/eclipsefdn.ads.js'
], 'docs/dist/js/solstice.js');

Before change:

/js/solstice.js │ 431 KiB

After change:

/js/solstice.js │ 76.6 KiB
/js/vendor.js │ 266 KiB 

In the case of this change, a second benefit is that because less code is being passed through Babel + JS shimming and compilation, and less of the core-js lib is being included in the final product as polyfill.

autumnfound commented 3 years ago

This gain is only seen when using polyfills + minification, so we should close this as we are removing babel from our stack for the near future.