I'm using both the Quick Tips here:
So my default layout looks roughly like this:
<!doctype html>
<html lang="en">
<head>
<title>{{title}}</title>
{% set css %}
{% include "assets/styles/fonts.css" %}
{% include "assets/styles/styles.css" %}
{% include "assets/styles/hljs.css" %}
{% endset %}
<style type="text/css">{{ css | cssmin | safe }}</style>
</head>
<body >
<main class="content">
{{ content | safe }}
</main>
{% set js %}
{% include "assets/scripts/polyfill.js" %}
{% include "assets/scripts/nav-toggle.js" %}
{% include "assets/scripts/offline.js" %}
{% include "assets/scripts/copy-snippet.js" %}
{% include "assets/scripts/tooltip.js" %}
{% include "assets/scripts/site.js" %}
{% endset %}
<script type="text/javascript">{{ js | jsmin | safe }}</script>
</body>
</html>Which works to embed any sitewide CSS & JS inline on every single page
Every page will be the same (and if I do need page-specific styles, I can handle them separately) - so it would be preferable for build times to only do the JS and CSS minification once, since the input should be identical and the minification should be a pure function
Currently, the build times scale linearly with the number of pages being built and the filters take up about 10 seconds out of a 12.5s build:
And a simple log on the filter function confirms that the same process is executed on every single page build.
Perhaps I can memoize the minifiy function, but since it's processing about 20k characters, the content hash is gonna be huge.
Another idea was to pull out the scripts into a separate template:
File: /_includes/partials/scripts.njk
{% set js %}
{% include "assets/scripts/polyfill.js" %}
{% include "assets/scripts/nav-toggle.js" %}
{% include "assets/scripts/offline.js" %}
{% include "assets/scripts/copy-snippet.js" %}
{% include "assets/scripts/tooltip.js" %}
{% include "assets/scripts/site.js" %}
{% endset %}
<script type="text/javascript">{{ js | jsmin | safe }}</script>And then include it in my layout page:
File: /layouts/default.njk
{% include "_partials/scripts.njk" %}But that would be under the hopes that there's a way to cache a template include?
I'm using both the Quick Tips here:
So my default layout looks roughly like this:
Which works to embed any sitewide CSS & JS inline on every single page
Every page will be the same (and if I do need page-specific styles, I can handle them separately) - so it would be preferable for build times to only do the JS and CSS minification once, since the input should be identical and the minification should be a pure function
Currently, the build times scale linearly with the number of pages being built and the filters take up about 10 seconds out of a 12.5s build:
And a simple log on the filter function confirms that the same process is executed on every single page build.
Perhaps I can memoize the minifiy function, but since it's processing about 20k characters, the content hash is gonna be huge.
Another idea was to pull out the scripts into a separate template:
File:
/_includes/partials/scripts.njk{% set js %} {% include "assets/scripts/polyfill.js" %} {% include "assets/scripts/nav-toggle.js" %} {% include "assets/scripts/offline.js" %} {% include "assets/scripts/copy-snippet.js" %} {% include "assets/scripts/tooltip.js" %} {% include "assets/scripts/site.js" %} {% endset %} <script type="text/javascript">{{ js | jsmin | safe }}</script>And then include it in my layout page:
File:
/layouts/default.njk{% include "_partials/scripts.njk" %}But that would be under the hopes that there's a way to cache a template include?