将外部库代码拆分（延迟加载）到 SvelteKit 项目中的正确方法是什么

Question

tldr;

我在使用 @sveltejs/adapter-static 延迟加载 Firebase JS SDK 9.0.0-beta.2 构建 SvelteKit 项目时收到以下警告：

[vite-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file. -firebase

一切似乎在现实生活中都有效（即在最初使用静态路由的客户端上，稍后调用 Firebase API。）我需要强调这个警告吗？ 注意——我不认为我曾经用直接的 Firebase 导入“污染”静态路由，但我可能做错了。请参阅下文了解我的方法。

更多信息

firebase：“9.0.0-beta.2”
@sveltejs/adapter-static: "^1.0.0-next.13",
@sveltejs/kit: "下一个",

我懒惰地将 Firebase 9（测试版）导入到 SvelteKit 项目中。我像这样为各种 Firebase 公开异步 getter...

import type { FirebaseApp } from 'firebase/app';
import type { Auth } from 'firebase/auth';
// etc...

// basic firebase options plus some emulator config...
import { getEnv } from './env';

let _app: FirebaseApp | null = null;
let _auth: Auth | null = null;
// etc...

export const firebaseApp = async () => {
  if (!_app) {
    const { loadApp } = await import('./load/load-app');
    _app = loadApp(getEnv());
  }
  return _app;

}

export const firebaseAuth = async (): Promise<Auth> => {
  if (!_auth) {
    const app = await firebaseApp();
    const { loadAuth } = await import('./load/load-auth');
    _auth = loadAuth(app, getEnv());
  }
  return _auth;
}

实际的 firebase 导入在 load/load-**.ts 文件中...

//load-app.ts
import { FirebaseApp, initializeApp } from 'firebase/app';
import type { FirebaseEnvironment } from '../api';

export const loadApp = (env: FirebaseEnvironment): FirebaseApp => {
  const  app = initializeApp(env.options);
  return app;
};

// load-auth.ts
import type { FirebaseApp } from 'firebase/app';
import { getAuth, useAuthEmulator, Auth } from 'firebase/auth';
import type { FirebaseEnvironment } from '../api';


export const loadAuth  = (app: FirebaseApp, env: FirebaseEnvironment): Auth => {
  const auth = getAuth(app);
  if (
    env.emulators &&
    env.emulators.auth
  ) {
    useAuthEmulator(auth, env.emulators.auth.url, {
      disableWarnings: true
    });
  }
  return auth;
}

这按预期工作——即 Vite 和 SvelteKit 似乎很好地将所有内容分块，我可以在我的组件中做这样的事情....

<script>
// SignInForm.svelte
  // the lazy getter from above...
  import { firebaseAuth } from '$lib/firebase';
  import {
    browserLocalPersistence,
    browserSessionPersistence,
    setPersistence,
    signInWithEmailAndPassword
  } from '@firebase/auth';
  const signIn = async () => {
   try {
      const auth = await firebaseAuth();
      const cred = await signInWithEmailAndPassword(auth, ...);
      // etc...
    } catch (error) {
      // handle
    }
  };

</script>

同样，所有这些似乎都有效，除了构建时的警告。我只需要更熟悉 Vite 和 SvelteKit 的人让我知道它是否是“正确的方式”（或不是。）提前致谢！

Answer 1

警告基本上说，如果 firebase 包导出任何 svelte 组件（它没有），svelte 编译器将不会拾取它并且无法优化它。我也看到了警告，我觉得没什么可担心的。

将外部库代码拆分（延迟加载）到 SvelteKit 项目中的正确方法是什么

What's the correct way to code split (lazy-load) an external library into a SvelteKit project

firebase

vite

sveltekit

tldr;

更多信息