Discuss how to approach adding page-specific JavaScript and CSS
Sometimes certain pages need custom JavaScript and CSS. To prevent excessive bundle sizes, we typically avoid including code which does not need to be run on many pages.
The known vulnerabilities page includes DataTables as a dependency. This dependency is only needed for this page and so we came up with a specific way to load extra, page-specific JS and CSS:
eclipsefdn/it/websites/eclipse.org!33 (comment 1154777)
It isn't a great solution so we are treating it as tech debt.
A proposed solution
We can just use the existing page_css_file
front matter parameter and introduce a page_js_file
. We can have a bundle per page that requires them. And import the main bundle if it depends on it.
Some event pages are already doing it this way for styles.
What the file structure could look like:
js/
pages/
known.js
main.js
less/
pages/
known.less
main.less
known.js
import '../main.js';
// Custom page-specific js
known.less
@import '../main.less';
@import (css) 'datatables.net-dt/css/jquery.dataTables.min.css';
// Custom page-specific styles
And finally the page after the bundles have been created by webpack:
---
title: Known Vulnerabilities
page_css_file: /css/known.css
page_js_file: /js/known.js
---
Some text content...
/cc @cguindon