How the size of the node_modules directory grows: the Nuxt example

2 дн. назад

Daniel Roe (author of Nuxt) reports that a new npm package will now be used for route analysis:

We've migrated Nuxt's file-system route generation to unrouting (#34316), which uses a trie data structure for constructing routes. The cold start is roughly the same (~8ms vs ~6ms for large apps), but dev server changes are up to 28x faster when you're not adding/removing pages, and ~15% faster even when you are.

https://github.com/nuxt/nuxt/releases/tag/v4.4.0

Performance improvements are always good. But what's happening under the hood? Looking at the GitHub changes:

In reality, 3 packages were added - which means yet another pile of files in node_modules. Along with unrouting, picomatch and @types/picomatch will also be installed. All these packages bring along a lot of semi-junk files:

Name	Type	Size
lib/	folder	59.6 kB
LICENSE	text/plain	1.09 kB
README.md	text/markdown	28.3 kB
index.js	application/javascript	479 B
package.json	application/json	1.9 kB
posix.js	application/javascript	60 B

It may seem insignificant, but every npm package drags this stuff along with it.

unrouting was written by Daniel Roe himself. This package already has 2 dependencies: escape-string-regexp and ufo. Let's take a look at escape-string-regexp. On npm, this package was last updated in 2021! It exports a single helper function:

export default function escapeStringRegexp(string) {
	if (typeof string !== 'string') {
		throw new TypeError('Expected a string');
	}

	// Escape characters with special meaning either inside or outside character sets.
	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
	return string
		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
		.replace(/-/g, '\\x2d');
}

Why not just copy this function directly into the project instead of pulling in an entire dependency?

And this situation exists across thousands of packages in thousands of projects. Millions of files are copied just for the sake of one function. Every time during CI/CD or local development around the world, semi-junk files like README.md, LICENSE, and others get copied, directories are created, and so on.

web development

Nuxt

JavaScript

size

performance

Комментариев пока нет

Nuxt 3 and 4: issue with multiple navigateTo calls

connected2u

недавно

At work, on one of our projects, I ran into an issue in Nuxt 4 where a page component needs to perform different redirects via navigateTo() based on various conditions during the execution of the setup function. Something like this:

<template>
  Some page
</template>

<script lang="ts" setup>
if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
}

if (2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
}

if (3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
}

if (4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
}
</script>

This is where the problem appears: in the end, the redirect always goes to the very last URL, i.e. in the example above the navigation ends up at /?abc=4. I dug into the documentation but couldn't find anything built-in to prevent subsequent navigateTo calls from being triggered. It seems this behavior is related to vue router.

You can't write it like this either:

if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  return; // not allowed in script setup
}

In the end, the only solution that worked was introducing a boolean variable and checking it before calling navigateTo:

let isAlreadyRedirected = false;

if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

Once again: this is the only thing that solved the problem for me. If you have any other solution, please let me know.

Показать полностью...

Nuxt

Vue.js

web development

How to use Quill Editor with Nuxt 3 and SSR (Vue)

dima

недавно

If you try to use Quill Editor with Nuxt 3 when rendering a page in SSR you will get this error:

500 document is not defined.

That means NodeJS doesn't have the global variable 'document'. Because SSR rendering is executed in
a NodeJS environment, not a browser.

The sad fact: <client-only> won't help with this problem. The problem with quill's code is that during import, it assumes it's being executed in the browser. I hope you remember that the code imported from the module is not just imported, but executed, i.e. the authors of Quill wrote it so that the 'document' object is immediately accessed there. Very bad.

One solution is to disable SSR, but its an awful solution. But the second solution is to use dynamic JS imports.

My <script lang="ts" setup> in QuillEditor.vue in Nuxt 3 project:

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
// import Quill from 'quill'; // SSR problem with 'document', need to use dynamic import
import type Quill from 'quill';

const elemForQuillEditor = ref<HTMLDivElement|null>(null);

let editor: null|Quill = null; // Do not store in ref() - it causes bugs!

// ...

async function createQuillAndSetListeners() {
  const Quill = (await import('quill')).default; // This is most important thing - usage of JS dynamic import

  if (!elemForQuillEditor.value) return;
  editor = new Quill(elemForQuillEditor.value, {
    theme: 'snow',
    modules: {
      history: {
        delay: 2000,
        maxStack: 500,
        userOnly: true,
      },
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['link'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }],
          ['clean'],
          ['undo', 'redo'],
        ],
        handlers: {
          undo() {
            editor?.history.undo();
          },
          redo() {
            editor?.history.redo();
          },
        },
      },
    },
    placeholder: props.placeholder,
  });
  
  editor.on('text-change', () => {
    if (!editor) return;
    // ... my other code
  });
}

// ...

onMounted(createQuillAndSetListeners);

Now your Quill editor will work in Nuxt 3 even during SSR!

Nuxt

Vue.js

JavaScript

Misleading naming in JavaScript: atob() and btoa()

mrAnderson

недавно

JavaScript has two globally available metods for working with Base64: atob() and btoa(). Their names clearly look like they were borrowed from older languages. In C, for instance, the standard library includes functions like atoi and atof:

#include <stdlib.h>

char str[] = "123";
int num = atoi(str); // 123

atoi means ASCII to integer, and atof means ASCII to float (though in reality it returns a double).

So what do you think the atob function does in JavaScript? ASCII to Base64? In other words, converting a regular string into a Base64 string? Nope! It does the exact opposite: it converts a Base64 string into a "regular" string. And btoa, in turn, converts a regular string into Base64!

console.log(btoa('Famabara')); // 'RmFtYWJhcmE='
console.log(atob('RmFtYWJhcmE')); // 'Famabara'

Who thought it was a good idea to swap the names like that? Love JS.

JavaScript

naming

C (programming language)

programming languages

Vue.js popularity in 2024

dima

1 г. назад

Let's try to measure the popularity of Vue.JS. I really like this framework and I am a supporter of its popularization.

First, let's look at the download statistics on NPM.
Now vs year ago:

vue - 4,868,119 - 3,746,361
@angular/core - 3,416,382 - 3,015,855
react - 23,763,131 - 20,548,838

As you can see, React is in the first place in absolute values. And VueJS is only in second place.

And now let's look at the percentage growth relative to last year's values.
vue +29,9%
angular +13,3%
react +15,6%
Hurray! Vue's popularity is growing faster than any of the three!

And now let's go through the sites from the top of Google and see what JS frameworks are used there.

For example, let's take the search query "rent car".
To understand which libraries each site uses, I used Wappalyzer browser extension.
Websites from search results; NF means "there is no framework from the big three".
rentalcars.com - NF
enterprise.com - NF
kayak.com - React
avis.com - NF (old AngularJS)
localrent.com - Vue
hertz.com - NF (old BackboneJS)
sixt.com - React
budget.com - NF (old AngularJS)
zipcar.com - NF
turo.com - React
autoeurope.eu - NF
alamo.com - React
rent.toyota.co.jp - NF
booking.com - React
costcotravel.com - React
borent.nl - NF
europcar.com - Vue
turo.com - React
vipcars.com - NF
skyscanner.net - React
tripadvisor.com - NF
timescar-rental.com - NF
klook.com - Vue
wiberrentacar.com - Vue
uber.com - NF
dollar.com - React
edreams.com - Vue
nationalcar.com - NF
thrifty.com - NF

As you can see, Vue is actively moving forward!

Показать полностью...

What technologies does Famabara use?

admin

2 г. назад

Famabara website uses Nuxt 3 as frontend. I like VueJS very much, that's why Nuxt was chosen.

SSR approach allows to have normal HTML on first page load and fast page switch due to SPA mode.

In backend Famabara uses Postgresql, NodeJS, Redis, Go.

Famabara

Nuxt

146