I have a large website with thousands of pages.
Most of them are generated on the fly using JSON files and Eleventy’s paging technique.
Each page has an eleventyNavigation entry in its front matter.
I’ve noticed a significant performance degradation: every single page renders in about 6 seconds.
Then I profiled Node.js using
npx --node-options="--cpu-prof" @11ty/eleventy,
and here are the results visualized with https://www.speedscope.app/:
As you can see, the DependencyGraph is constructed every time eleventyNavigationBreadcrumb(collection.all, …) is called.
My proposal
Add an option allowGraphCache to the eleventyNavigationBreadcrumb() function.
It could look like this:
let _cachedGraph = null;
function findBreadcrumbEntries(nodes, activeKey, options = {}) {
let graph = null;
if (options.allowGraphCache) {
if (!_cachedGraph) {
_cachedGraph = getDependencyGraph(nodes);
}
graph = _cachedGraph;
} else {
graph = getDependencyGraph(nodes);
}
// the rest of the function body
}
then the templates could use this feature like this
---
navOptions:
includeSelf: true
allowGraphCache: true
---
{% assign navPages = collections.all | eleventyNavigationBreadcrumb: "Mammals", navOptions %}
{{ navPages | json }}
or like this
const constructedNavBreadcrumbs = filters.eleventyNavigationBreadcrumb(
collections.all,
currentNavigationKey,
{
includeSelf: true,
allowGraphCache: true
}
)
Thanx in advance! )
ps: I’ve never made a pull request before, but I’d be happy to figure it out and create one if you’re okay with this improvement. :)
I have a large website with thousands of pages.
Most of them are generated on the fly using JSON files and Eleventy’s paging technique.
Each page has an
eleventyNavigationentry in its front matter.I’ve noticed a significant performance degradation: every single page renders in about 6 seconds.
Then I profiled Node.js using
npx --node-options="--cpu-prof" @11ty/eleventy,and here are the results visualized with https://www.speedscope.app/:
As you can see, the
DependencyGraphis constructed every timeeleventyNavigationBreadcrumb(collection.all, …)is called.My proposal
Add an option
allowGraphCacheto theeleventyNavigationBreadcrumb()function.It could look like this:
then the templates could use this feature like this
--- navOptions: includeSelf: true allowGraphCache: true --- {% assign navPages = collections.all | eleventyNavigationBreadcrumb: "Mammals", navOptions %} {{ navPages | json }}or like this
Thanx in advance! )
ps: I’ve never made a pull request before, but I’d be happy to figure it out and create one if you’re okay with this improvement. :)