Slow compiler makes loading times longer when rendering views

[yivo]

Slow compiler makes loading times longer when rendering views

[yivo]

Hi!

Thank you for the feedback.

I understand your issue good. I think you are using Pug compiler which you have installed with NPM. In that case every time you compile the template pug-ruby invokes command line (https://github.com/yivo/pug-ruby/blob/master/lib/jade-pug/system-compiler.rb#L38) by passing your template, locals, options etc. For sure this means every time you compile template Node.js needs to parse and evaluate every Pug JavaScript dependency and the compiler itself. It is very very slow but this method exists and is supported because it provides access to almost full list of Pug features.

The second method is to use libv8 engine which is shipped as Ruby gem and evaluate prebuilt web version of Pug compiler (https://github.com/yivo/pug-ruby/blob/master/vendor/pug-2.0.0-rc.4.min.js) to compile your template. In this case the compiler code is evaluated only once and compilation works fast. But this method has drawbacks which stops you from using some Pug features (see README).

Please, try Pug.use "2.0.0-rc.4" and see how fast it will be.

There is additional solution: you can compile Pug template as client side (get JS function) and use ExecJS to evaluate it with your locals.

I am also going to add Pug 2.0.x sources which was released in March so you can do Pug.use "2.0.3".

[nicmosc]

Thanks @yivo for the quick reply, and for the detailed explanation. I think I'm already using a prebuilt version of the pug compiler as I'm setting the specific version I want to use within the view, and not the system-wide version. I've tried with the version you suggest and it still takes a couple of seconds to compile around 20 templates.

Here's what I'm doing just so you have a clearer overview of what i want to achieve:

= Pug.use "2.0.0-rc.4"

- card = File.read("app/views/components/_card.pug")

- images.each do |image|
   = (Pug.compile card, locals: { image: asset_pack_path(image) }).html_safe

Here i have around 6 images (each image object is the filename so you see why I need to recompile with different locals), and it takes 4-5 seconds for the page to load. The card partial isn't very complicated, here's a snippet:

.PCard(class=small ? 'PCard--small' : '')
  .PCard__cover(class=text ? '' : 'PCard__cover--full-size')
    .PCard__expand
      if label
        .PCard__label= label
      .PCard__fallbackText= text
      .PCard__expandButton Expand
    .PCard__image(data-element="ie-fallback" style=`background-image: url(${locals.image})`)
    img(src=locals.image class="PCard__image")
  if text
    .PCard__footer= text

If I don't find any other solution I'll try what you said, using the partial in JS and rendering it in the view itself.

Thanks

[yivo]

@nicmosc please try the snippet below:

require "pug-ruby"

Pug.use "2.0.0-rc.4"

template_source   = File.read("template.pug")
template_function = ExecJS.compile "var compile = #{Pug.compile(template_source, client: true)};"
template_locals   = {}
rendered_template = template_function.call(:compile, template_locals)

I recommend to use https://github.com/discourse/mini_racer as JS runtime.

[nicmosc]

@yivo thanks for the snippet, it works like a charm! Super fast 🤘 I'll let you know should I have more issues but looks good for now!

[yivo]

@nicmosc I am happy it helped you. Closing the issue.