Slow Tailwind / Hugo builds. How to troubleshoot NPM / hugo pipes' performance?

support
1

hi,

unfortunately I cannot share my actual repo, but I tried using the template metrics command to see why builds easily take multiple seconds (I wait 5-8 seconds before refreshes) and…

hugo v0.110.0+extended darwin/arm64 BuildDate=unknown

Template Metrics:

     cumulative       average       maximum      cache  percent  cached  total  
       duration      duration      duration  potential   cached   count  count  template
     ----------      --------      --------  ---------  -------  ------  -----  --------
  43.264936873s  1.730597474s  2.590967625s         25        0       0     25  partials/meta.html
  16.395795082s   2.34225644s  2.592087125s          0        0       0      7  games/single.html
  10.280291666s  3.426763888s   3.46902925s          0        0       0      3  _default/list.html
   9.062868751s  1.294695535s  2.282034875s          0        0       0      7  _default/single.html
   2.265439167s  1.132719583s   1.13477625s          0        0       0      2  doc/single.html
   2.112698958s  2.112698958s  2.112698958s          0        0       0      1  _default/index.html
      2.081549s     2.081549s     2.081549s          0        0       0      1  games/list.html
   1.107479208s  1.107479208s  1.107479208s          0        0       0      1  404.html
     5.924251ms     1.18485ms    3.926125ms          0        0       0      5  _internal/_default/rss.xml
     4.685834ms     187.433µs     644.958µs        100        0       0     25  partials/nav.html
     3.864043ms     351.276µs    1.057458ms          0        0       0     11  shortcodes/partial.html
     3.589289ms     143.571µs    1.954834ms         93        0       0     25  partials/footer.html
     1.045999ms      32.687µs     548.791µs          0        0       0     32  css/index.css

meta.html is the worst offender and this is what code I use (which might need re-working?):

  {{ $styles := resources.Get "css/index.css" }}
  {{ $styles = $styles | resources.PostCSS }}
  {{ if hugo.IsProduction }}
    {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
  {{ else }}
    {{ $styles = $styles | resources.ExecuteAsTemplate (printf "css/index.dev.%v.css" now.UnixMilli) .}}
  {{ end }}
  <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />


  {{ $styles := resources.Get "css/index.css" }}
  {{ $styles = $styles | resources.PostCSS }}
  {{ if hugo.IsProduction }}
    {{- with $styles -}}
      <style>{{- .Content | safeCSS -}}</style>
    {{- end -}}
  {{ else }}
    {{ $styles = $styles | resources.ExecuteAsTemplate (printf "css/index.dev.%v.css" now.UnixMilli) .}}
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
  {{ end }}

is it possible to somehow test / see why tailwind is taking so long to build? or maybe it’s not tailwind at all and something else (but everything else in meta.html is just simple html/template code so I doubt it could be anything else)?

2

I looked over my code again. Not sure why I had two different css generation methods

this works faster but i havent tested in prod:



  {{- $styles := resources.Get "css/index.css" | postCSS (dict "config" "./postcss.config.js") -}}
  {{- if .Site.IsServer }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
  {{ else }}
  {{- $styles := $styles| minify | fingerprint | resources.PostProcess -}}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">
  {{ end -}}
3

You can, I think, really cache that code since its the same on every page.