reactjs 如何有效地将p5js与Angular配合使用?

ehxuflar  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(101)

所以我通过npm安装了p5,并将其导入到一个组件中,它运行得很好,直到我准备构建项目时才意识到angular将整个p5js编译到main.js中,网站现在只有1.9MB。
显然,我希望项目小一点,有没有办法在不安装整个库的情况下使用带Angular 的p5js?
在我的项目中,我正在创建一个包含多个组件的p5画布。

vh0rcniy

vh0rcniy1#

很多方法都无法处理这个问题,所有的文件都将被编译并捆绑在main.js中。
但是你可以做的是创建一个自定义模块,导入p5.js库,然后你可以使用延迟加载
通常在Router中是这样做的:

RouterModule.forRoot([
      {
        path: 'lazy',
        loadChildren: () => import('./lazy/lazy.module').then((m) => m.LazyModule),
      },
    ]),

但是你也可以在一个定制服务中处理它,就像这样:

@Injectable({
  providedIn: 'root',
})
export class LazyLoaderService {
  private lazyMap: Map<string, Promise<unknown>> = new Map()
  constructor() {}
  getLazyModule(key: string): Promise<unknown> {
    return this.lazyMap.get(key)
  }
  loadLazyModules(): Observable<number | void> {
    return of(1).pipe(
      delay(2000),
      tap(() => {
        this.lazyMap.set(
          'lazy',
          import('./lazy/lazy.module').then((m) => m.LazyModule)
        )
      })
    )
  }
}

然后Angular会拆分模块并在需要的时候加载它,但是如果你直接在App.Component.ts中使用它,它就帮不上什么忙了,因为lazy模块会直接加载到init中。

相关问题