Gumaa Posts - Answer Overflow

Gumaa

Explore posts from servers

•Created by Gumaa on 6/27/2024 in #❓・help

Performance disadvantages of splitting components into separate chunks

So I'm working with Nuxt2. Usually if we have a component that is rendered using v-if (so it is not always needed) we import it like this:

  components: {
    SideCategory: () => import(/* webpackChunkName: "SideCategory" */
      '~/components/SideCategory.vue')
  },

  components: {
    SideCategory: () => import(/* webpackChunkName: "SideCategory" */
      '~/components/SideCategory.vue')
  },

And in the final build we get a separate JS chunk for this component. It is all fine. But my question is - is there any potential drawback of importing every component like this? Would it be better to keep components that are always visible imported normally? Meaning:

import Description from '~/components/Description .vue';
// ...
components: { Description }

import Description from '~/components/Description .vue';
// ...
components: { Description }

Does creating bunch of small chunks hurt the performance and core web vitals? I guess it could make it slightly worse, but the difference for a single component would be to small to measure it. What do you think?

5 replies

NNuxt

•Created by Gumaa on 5/27/2024 in #❓・help

What is a standard way of handling typescript in Nuxt3

I'm starting a fresh project and I wonder what should I do about typescript in Nuxt 3. Normally I would create a folder types and put my ordinary types there and import them in my components. But is that a "standard" approach in new Nuxt? Since other stuff is auto imported maybe the expected way is to add this folder to auto imports?

// nuxt.config.ts:
imports: {
  dirs: ['types/*.ts', 'types/**/*.ts'],
},

// nuxt.config.ts:
imports: {
  dirs: ['types/*.ts', 'types/**/*.ts'],
},

Or maybe I should just declare types globally?

// types/whatever.d.ts

declare global {
  type MyType{
    ...
  }
}

export {};

// types/whatever.d.ts

declare global {
  type MyType{
    ...
  }
}

export {};

Or stick to the old way? For example Nuxtr does not even recommend any file structure for types, so maybe there is completely different way of handling it?

4 replies

NNuxt

•Created by Gumaa on 5/20/2024 in #❓・help

How to debug computed property

I have very weird case of "it is working, but I don't know why". And I don't know how to properly debug computed properties and find what exactly triggered them. It will be hard for me to provide a link for reproduction, but I will try to describe my setup in simplified terms. I have a component with a computed like this:

const { product } = toRefs(props);
const { isProductExcluded } = useProductExcluded();

const shouldShowProduct = computed(() => { // tiggered for seemingly no reason
  console.log('recalculate computed');
  return !isProductExcluded(product.value);
}

const { product } = toRefs(props);
const { isProductExcluded } = useProductExcluded();

const shouldShowProduct = computed(() => { // tiggered for seemingly no reason
  console.log('recalculate computed');
  return !isProductExcluded(product.value);
}

And I don't know why this computed is triggering, even though product.value is not changing. Somehow magically it knows when the return value of isProductExcluded is different and it is relaunching whole computed.

17 replies

DDeno

•Created by Gumaa on 9/12/2023 in #help

Excluding certain directories when using "walk"

Hello, I'm writing a script that should crawl through a directory and search for a given text inside of these files. I'm having trouble understanding the documentation about walk options, specifically the skip option. It says:

skip: RegExp[] = undefined

List of regular expression patterns used to filter entries. If specified, entries matching the patterns specified by this option are excluded.

skip: RegExp[] = undefined

List of regular expression patterns used to filter entries. If specified, entries matching the patterns specified by this option are excluded.

But it is enigmatic - what exactly is being checked? The name of a file? Path of the file? Absolute path? Relative path? It does not say. If you are wondering I'm doing something like this:

  const iter = walkSync(projectFolder, {
    skip: [
      /node_modules/,
      /.git/,
      /static/,
      /lang/,
    ],
  });

  for (const entry of iter) {
    if (entry.isFile) {
      const content = Deno.readTextFileSync(entry.path);
      checkContent(content);
    }
  }

  const iter = walkSync(projectFolder, {
    skip: [
      /node_modules/,
      /.git/,
      /static/,
      /lang/,
    ],
  });

  for (const entry of iter) {
    if (entry.isFile) {
      const content = Deno.readTextFileSync(entry.path);
      checkContent(content);
    }
  }

So I just provided the name of a folder that I want to ignore. But I'm not sure if this is the correct approach or if this might ignore some extra files that I did not intent to ignore.

2 replies

Gaming

Programming