所以我通过npm安装了p5,并将其导入到一个组件中,它运行得很好,直到我准备构建项目时才意识到angular将整个p5js编译到main.js中,网站现在只有1.9MB。显然,我希望项目小一点,有没有办法在不安装整个库的情况下使用带Angular 的p5js?在我的项目中,我正在创建一个包含多个组件的p5画布。
vh0rcniy1#
很多方法都无法处理这个问题,所有的文件都将被编译并捆绑在main.js中。但是你可以做的是创建一个自定义模块,导入p5.js库,然后你可以使用延迟加载。通常在Router中是这样做的:
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中。
1条答案
按热度按时间vh0rcniy1#
很多方法都无法处理这个问题,所有的文件都将被编译并捆绑在main.js中。
但是你可以做的是创建一个自定义模块,导入
p5.js
库,然后你可以使用延迟加载。通常在
Router
中是这样做的:但是你也可以在一个定制服务中处理它,就像这样:
然后Angular会拆分模块并在需要的时候加载它,但是如果你直接在App.Component.ts中使用它,它就帮不上什么忙了,因为lazy模块会直接加载到init中。