有条件地导入局部变量以提高组件的性能

Question

尝试从相对路径中的许多其他语言导入一种语言，以阻止页面刷新时不必要的负载并获得更好的 Lighthouse 结果。

当Vue18i是这样的时候，它加载了这2种语言。

locales: [
        {
          code: 'en',
          iso: 'en-GB',
          name: 'English',
          // file: 'en.json',
          file: 'en.js'
        },
        {
          code: 'tr',
          iso: 'tr-TR',
          name: 'Türkçe',
          file: 'tr.js',
          // isCatchallLocale: true
        },
      ],

我想让它加载一种语言，并且 1 个页面有一个包含 200 多个数组的类别组件。要求有条件地只加载一种语言类别的翻译。

例如，考虑到每个语言数组和类别翻译，下面的解决方案并不好。

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}
</i18n>

<template>
  <p>{{ $t('hello') }}</p>
</template>

当Categorizer.vue组件打开时，当config.baseapi是http://localhost:3000/en/p/add。它应该将分类翻译加载到 i18n。

import en from '~/locales/encategory.json'

如果是 http://localhost:3000/tr/p/add，应该加载土耳其语翻译。

import tr from '~/locales/trcategory.json'

Answer 1

找到了一个简单的方法。找不到参考资料，因为有很多针对 CommonJS 而不是针对 ES6 JavaScript。这是针对纯粹的 JavaScript 优化的，因此针对 Nuxt。您不想为土耳其用户加载 50 种语言：

    let productcolortr;
    let productcoloren;
    const sleep = (ms) => new Promise((f) => setTimeout(f, ms));
    if ($locale == 'en') {
            await sleep(4000); // simulate network delay
            productcoloren = (await import('../../../locales/productcoloren')).default;
            addMessages('en', productcoloren);
        } else {
            await sleep(4000); // simulate network delay
            productcolortr = (await import('../../../locales/productcolortr')).default;
            addMessages('tr', productcolortr);
        }

这是新一代Sveltekit的含义。它在 DOM 加载并执行 if 条件之前等待。 $lan 是存储变量，这里比 Nuxt 好多了：

{#if $lan == "en"}
    {#await import('../../locales/en.js') then c}
    {$lan = "en"}
    {/await}
    {:else}
    {#await import('../../locales/tr.js') then c}
    {$lan = "tr"}

    {/await}
{/if}

有条件地导入局部变量以提高组件的性能

Conditionally import locals for improving performance on components

javascript

internationalization

nuxt.js