Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can component-level lazy loading be supported?(能否支持组件级懒加载?) #1918

Open
3 tasks done
WangJincheng4869 opened this issue Aug 16, 2024 · 1 comment
Open
3 tasks done
Labels
Status: Proposal Request for comments

Comments

@WangJincheng4869
Copy link

Clear and concise description of the problem

目前会将多语言内容打包在 index.js 中,然而在页面加载时其中 99% 的多语言内容都是不需要的,导致首页加载缓慢。

之所以文件很大主要有以下原因:

  1. 这个项目比较庞大,拥有很多的功能。
  2. 在不少页面上存在描述性的文本,这些内容没必要存储在后端,因为它们是描述某个字段的含义以及如何填写。

Currently, multilingual content is packaged in index.js, but 99% of the multilingual content is not needed when the page is loaded, which causes the homepage to load slowly.

The main reasons for the large file size are as follows:

  1. This project is large and has many functions.
  2. There are descriptive texts on many pages, which do not need to be stored in the backend because they describe the meaning of a field and how to fill it out.

Suggested solution

如果可用支持组件级别的懒加载,类似打包时按照路由分包那样分在不同的组件内,那么 index.js 会小很多。

因为有很多的内容都不是通用的,仅仅是某个组件才能用到。

If component-level lazy loading is supported, and it is divided into different components like the routing package when packaging, then index.js will be much smaller.

Because there are many contents that are not universal and can only be used by a certain component.

Alternative

我目前是在 i18n 上基础上自己创建了一个 i18n.ts 解决的,例如这样:

I currently solved the problem by creating an i18n.ts based on i18n, for example:

import { i18nUtils } from '@/config/i18n';

const i18nData = {
  zhCN: {
    multiInstanceType: '多任务处理方式',
  },
  en: {
    multiInstanceType: 'Multi instance type',
  },
};

/**
 * 流程编辑器配置面板多语言处理
 */
export function useFlowSettingPanelI18n() {
  // 多语言存储 key
  const { localeKey } = i18nUtils();

  const i18n = computed(() => i18nData[localeKey.value]);
  return { i18nData: i18n };
}

但是这样有个弊端就是使用起来麻烦,每个组件都要编写一套类似的内容。并且无法使用 i18n Ally 插件来增加可读性。

But the disadvantage of this is that it is troublesome to use. Each component must write a similar set of content. And there is no way to use the i18n Ally plugin to increase readability.

Additional context

No response

Validations

@WangJincheng4869 WangJincheng4869 added the Status: Proposal Request for comments label Aug 16, 2024
@typed-sigterm
Copy link

Try <i18n> in SFC

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Proposal Request for comments
Projects
None yet
Development

No branches or pull requests

2 participants