Slow cold start in development mode using esbuild with jsbundling-rails

rubyonrails-talk
1

Hi, I am facing an issue when bundling my js with jsbundling-rails and esbuild in development mode.

When starting/restarting my server, the first request is very slow(roughly 60s), I figured out that this is due to the compilation of assets that is taking place on the fly as my setting in development.rb is:

config.assets.debug = true

I believe that compile option is also true by default. I am running my projects with Rails 7.1.3.4 and jsbundling-rails and I’m wondering why is it the case? Why do assets compile again?

I have a few entrypoints for my javascript files and I run the esbuild with option

assetNames: '[dir]/[name]-[hash].digested',

However that doesn’t seem to have any effect on the files. When I tried

entryNames: '[dir]/[name]-[hash].digested'

My javascript files would bundle with this options, the files are getting creating correctly with name-[shorthash]. But the browser doesn’t get those files and just serves unbundled versions of my js files.

below is my config

const config = {
  entryPoints: [
    // loads of js paths from app/javascript with .js .vue and .svelte
  ],
  bundle: true,
  plugins: [
    sveltePlugin({ compilerOptions: { css: true } }),
    vuePlugin(),
    YAMLPlugin(),
    sassPlugin(),
    myPlugin
  ],
  outdir: path.join(process.cwd(), "app/assets/builds"),
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  minify: isProduction,
  drop: isProduction ? ['console', 'debugger'] : [],
  loader: {
    ".yaml": "text",
    ".png": "file",
    ".jpg": "file",
    ".gif": "file",
    ".svg": "file",
    ".scss": "css",
    ".html": "text",
    ".woff": "file",
    ".woff2": "file",
    ".ttf": "file",
    ".eot": "file",
    ".js": "js",
    ".svelte": "js",
    ".vue": "js",
  },
  assetNames: '[dir]/[name]-[hash].digested', // does nothing
  // entryNames: '[dir]/[name]-[hash].digested',  // works but files are not served bundled in browser
  publicPath: "assets",
  sourcemap: true,
}

The reason I added this [hash] is due to the nature of sprockets that are fingerprinting each file with sha256 and I figured that maybe this would solve the issue and will avoid compiling them again, but this is not the case.

Building with this config only builds javascript files, however there are still plenty of things that are happening when I run

rails assets:precompile --trace

I can see that there is a bunch of rails files compiled(for example actioncable.js etc) and also my static assets that go into public/assets when running above command.

Everything works pretty much as expected, production is okay, but the only problem is with initial load when running development server. So here is my question if anybody faced similiar problem:

How do I reduce the initial request time and run all the bundling and compiling so that it aligns with sprockets? Can I fingerprint those files so that sprockets recognizes the hash and doesn’t compile them but just copy the file? What is the correct way to use esbuild with rails? I’m feeling a bit lost here. Should I change my entryPaths to compile all static assets using esbuild now too?