我有一个包含多个模块的应用。
其中一个模块是可视化pdf。我使用非常贪婪的 pdf.js,因此 vendor.js 有点大。
有没有办法在延迟加载 pdf 模块的同时延迟加载库?
我注意到了这个答案,但感觉不太对。 Load external js script dynamically in Angular 2
我不是要延迟加载模块,而是要延迟加载外部库。
最佳答案
如果你想延迟加载外部库,如 jquery
、jspdf
,你可以创建一些服务,如:
延迟加载库.service.ts
import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { DOCUMENT } from '@angular/platform-browser';
@Injectable()
export class LazyLoadingLibraryService {
private loadedLibraries: { [url: string]: ReplaySubject<any> } = {};
constructor(@Inject(DOCUMENT) private readonly document: any) { }
public loadJs(url: string): Observable<any> {
if (this.loadedLibraries[url]) {
return this.loadedLibraries[url].asObservable();
}
this.loadedLibraries[url] = new ReplaySubject();
const script = this.document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = () => {
this.loadedLibraries[url].next('');
this.loadedLibraries[url].complete();
};
this.document.body.appendChild(script);
return this.loadedLibraries[url].asObservable();
}
}
每当你需要一些外部库时,只需使用这个只会加载一次库的服务:
app.component.ts
export class AppComponent {
constructor(private service: LazyLoadingLibraryService) {}
loadJQuery() {
this.service.loadJs('https://code.jquery.com/jquery-3.2.1.min.js').subscribe(() => {
console.log(`jQuery version ${jQuery.fn.jquery} has been loaded`);
});
}
loadJsPdf() {
this.service.loadJs('https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js').subscribe(() => {
console.log(`JsPdf library has been loaded`);
});
}
如果您正在寻找延迟加载 Angular 模块,那么这些问题可能对您有帮助:
关于javascript - 如何在 Angular 4 模块中延迟加载库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46240293/