Gohugo batch get the chunks for preloads

dev
1

Not sure if I have missed something. I would be happy try a PR if you want it and can point me in the right direction.
What I want is something like this

    {{ with (templates.Defer (dict "key" $group "data" $group )) }}
      {{ with (js.Batch "js/master") }}
        {{ with .Build }}
          {{ with index .Groups $ }}
            {{ range . }}
              {{ $s := . }}
              {{ if ne $s.IsEntry true }}
              <link rel="modulepreload" href="{{$s.RelPermalink}}">
              {{ end }}
1 Like
2

This is not currently possible. I’m pretty sure that ESBuild don’t return the chunk filenames in the output.

You can control the chunk output dir/naming, so I guess what want would be possible. Whether we want to add more complexity to this is another question.

Is this a big thing? Can you provide me some links to some articles/blogs that shows that this makes a real difference?

3

It’s not a big thing. I just have OCD.

My site isn’t huge., Just a landing page style thing. I just have a dependency graph warning in lighthouse is all.

I could build the script with .Build but i wanted to reuse the module and chunk.

Might not be too bad to flag capture chunks, then for each group add a directory. Enabling reading the chunks per group.

I would need to figure out if a chunk is await import( or import “”. And imported from an entry point (which might make it not possible). And chunks which are shared between groups would not have to live in the group directory. From reading the docs. esbuild as current only has --chunk-names=chunks/[name]-[hash]-[ext].. But I could say it is an import if its not ^chunk-*. But then chunk would be a reserved name, probs not an issue if the hash is present mind.

Looks like it would have to be esbuild - API

{{ if ne $s.IsEntryChunk true }}
   <link rel="modulepreload" href="{{$s.RelPermalink}}">
{{ end }}

i might be be missing another solution to my issue here,… will probs come to me in a few days.

In terms of speed the modules defer and push the dom content loaded forward by the module import depth * latency. Yes you can make async, but then they lose execution order.

To just create a issue. In oil rigs over starlink, it might have good improvments.

My lighthouse performance went from 98 to 96. -2.

For reference:

main.js async:→ something.js import:→ another.js

    "another.js": {
      "bytes": 53,
      "imports": [],
      "format": "esm"
    },
    "something.js": {
      "bytes": 174,
      "imports": [
        {
          "path": "another.js",
          "kind": "import-statement",
          "original": "./another.js"
        }
      ],
      "format": "esm"
    },
    "main.js": {
      "bytes": 119,
      "imports": [
        {
          "path": "something.js",
          "kind": "dynamic-import",
          "original": "./something.js"
        }
      ],
      "format": "cjs"
    }
  },
  "outputs": {
    "dist/main.js": {
      "imports": [
        {
          "path": "dist/chunk-L3RX5ZXO.js",
          "kind": "import-statement"
        },
        {
          "path": "dist/something-YKOR44MB.js",
          "kind": "dynamic-import"
        }
      ],                                                                                             [0/165]
      "exports": [
        "default"
      ],
      "entryPoint": "main.js",
      "inputs": {
        "main.js": {
          "bytesInOutput": 150
        }
      },
      "bytes": 245
    },
    "dist/something-YKOR44MB.js": {
      "imports": [
        {
          "path": "dist/chunk-L3RX5ZXO.js",
          "kind": "import-statement"
        }
      ],
      "exports": [
        "initialize"
      ],
      "entryPoint": "something.js",
      "inputs": {
        "another.js": {
          "bytesInOutput": 115
        },
        "something.js": {
          "bytesInOutput": 200
        }
      },
      "bytes": 437
    },
    "dist/chunk-L3RX5ZXO.js": {
      "imports": [],
      "exports": [
        "__commonJS",
        "__esm"
      ],
      "inputs": {},
      "bytes": 364
    }
  }
}
4

Yes, but for that to happen, you need some help from ESBuild. There is a metadata file (JSON) in the result from ESBuild, which may contain that information (I haven’t looked closely). I think we at least at some point parsed that file to get some path into.