DEV Community

Cover image for Nuxt3 LCP Advanced optimizations with pnpm
Domenik Reitzner
Domenik Reitzner

Posted on

Nuxt3 LCP Advanced optimizations with pnpm

This is just a quick one (I promise). πŸ˜‰

The problem

As I was reading through the nuxt docs about LCP optimisation and tried implementing it, I hit a wall. 🧱

πŸ“˜ docs link

So here to everyone who has the same issue that I had.

We are using pnpm as our package manager, so the path to the entry.js doesn't look like

node_modules/nuxt/dist/app/entry.js

but more like

node_modules/.pnpm/nuxt@3.12.4_@parcel+watcher@2.4.1_@types+node@18.19.41_eslint@8.57.0_ioredis@5.4.1_magicast@0_sp6oxyoamdsk3zyrb4wztbq7li/node_modules/nuxt/dist/app/entry.js

The solution

To hardcode this path will cause an issue as soon as you update any package that is in that pathname.

To circumvent this you can update the hook to do the following:

import { readdirSync } from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // find the app entry, css list
      const baseModulesFolder = path.dirname(fileURLToPath(import.meta.url)) + '/node_modules/.pnpm/';
      const nuxtFolder = readdirSync(baseModulesFolder).find((file) => typeof file === 'string' && file.startsWith('nuxt@'));
      const entryFilePath = `node_modules/.pnpm/${nuxtFolder}/node_modules/nuxt/dist/app/entry.js`;

      const css = manifest[entryFilePath]?.css;
      if (css) {
        // start from the end of the array and go to the beginning
        for (let i = css.length - 1; i >= 0; i--) {
          // if it starts with 'entry', remove it from the list
          if (css[i].startsWith('entry')) css.splice(i, 1);
        }
      }
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

I hope this helps anyone.

Have a great day and keep on coding πŸ§‘β€πŸ’»

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay