有什么方法可以在 Angular 8 应用程序中使用 CDN 加载 pdfmake 等第三方库?
Is there any way to load third party libraries like pdfmake using CDN in Angular 8 application?
我在我的 angular 8 项目中使用 pdfmake 库来生成客户端 pdf。我已经安装了 pdfmake 库模块并且工作正常。但是这个第三方库增加了 angular 应用构建大小,如下所示。
为了减小构建大小,我想通过 CDN link 使用 pdfmake 库并动态加载它。
请问有没有什么方法可以在 angular 应用程序中从 CDN 加载第三方库?
您可以按照我在 link 中指定的方式使用动态导入。 Angular 是使用 Webpack 构建的,它非常聪明地锻炼 import()
属于它。
我建议创建一种 LibraryResolverService
的下一个内容
public readonly myLib$ = defer(() =>
// webpackChunkName is to have your lib called 'lib.js' when loaded
// there are some other options like prefetch (probably won't work here
// due to defer which I use to not to load library when it's not required
from(import(/* webpackChunkName: "lib" */ 'lib')))
然后你必须订阅它并在控制台中检查你在输出中得到的内容。
通常您会得到 default
,其中包含您需要的所有内容。
然而,当 lib 已过时并且在导入后没有任何结果时,存在一些边缘情况。
这里我只能建议编写自己的脚本加载器,它将:
- 创建脚本
- 分配 src
- 将其附加到 header
- 侦听加载事件(以便您知道脚本已加载)
- 通知您的应用您已准备就绪
为什么要拥有脚本加载器而不是 async/defer
。因为您可以通过这种方式加载您决定的任何动态库,并且您可以完全控制加载过程(您知道它何时加载并控制它何时开始加载)。
参考了一些文章和答案后,我可以从CDN加载pdfmake库了。
我们可以使用两种方法来做到这一点。
1. Initially Loading : 在 index.html
的 <head>
部分添加脚本标签。并访问window对象中导出的全局库对象。
对于 PDFMake,我在头部添加了以下脚本,
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js'></script>
并在组件中使用它,在组件顶部将其声明为 declare let pdfMake: any ;
使用此变量访问 pdfmake 方法:pdfMake.createPdf(docDefinition)
2。动态加载:如果你想在特定动作或特定组件上加载库,你可以动态添加脚本标签。
参考此 了解此方法。
我已经写了关于这两种方法的文章 Loading External Libraries from CDN in Angular。
使用 async 关键字声明您的函数并使用动态导入。
async downloadPdf() {
const pdfMake = await import("pdfmake/build/pdfmake.min");
const pdfFonts = await import("pdfmake/build/vfs_fonts");
let dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
pdfMake.createPdf(dd,undefined,undefined,pdfFonts).download();
}
同时安装
npm install --save @types/pdfmake
我在我的 angular 8 项目中使用 pdfmake 库来生成客户端 pdf。我已经安装了 pdfmake 库模块并且工作正常。但是这个第三方库增加了 angular 应用构建大小,如下所示。
为了减小构建大小,我想通过 CDN link 使用 pdfmake 库并动态加载它。
请问有没有什么方法可以在 angular 应用程序中从 CDN 加载第三方库?
您可以按照我在 link 中指定的方式使用动态导入。 Angular 是使用 Webpack 构建的,它非常聪明地锻炼 import()
属于它。
我建议创建一种 LibraryResolverService
的下一个内容
public readonly myLib$ = defer(() =>
// webpackChunkName is to have your lib called 'lib.js' when loaded
// there are some other options like prefetch (probably won't work here
// due to defer which I use to not to load library when it's not required
from(import(/* webpackChunkName: "lib" */ 'lib')))
然后你必须订阅它并在控制台中检查你在输出中得到的内容。
通常您会得到 default
,其中包含您需要的所有内容。
然而,当 lib 已过时并且在导入后没有任何结果时,存在一些边缘情况。
这里我只能建议编写自己的脚本加载器,它将:
- 创建脚本
- 分配 src
- 将其附加到 header
- 侦听加载事件(以便您知道脚本已加载)
- 通知您的应用您已准备就绪
为什么要拥有脚本加载器而不是 async/defer
。因为您可以通过这种方式加载您决定的任何动态库,并且您可以完全控制加载过程(您知道它何时加载并控制它何时开始加载)。
参考了一些文章和答案后,我可以从CDN加载pdfmake库了。
我们可以使用两种方法来做到这一点。
1. Initially Loading : 在 index.html
的 <head>
部分添加脚本标签。并访问window对象中导出的全局库对象。
对于 PDFMake,我在头部添加了以下脚本,
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js'></script>
并在组件中使用它,在组件顶部将其声明为 declare let pdfMake: any ;
使用此变量访问 pdfmake 方法:pdfMake.createPdf(docDefinition)
2。动态加载:如果你想在特定动作或特定组件上加载库,你可以动态添加脚本标签。
参考此
我已经写了关于这两种方法的文章 Loading External Libraries from CDN in Angular。
使用 async 关键字声明您的函数并使用动态导入。
async downloadPdf() {
const pdfMake = await import("pdfmake/build/pdfmake.min");
const pdfFonts = await import("pdfmake/build/vfs_fonts");
let dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
pdfMake.createPdf(dd,undefined,undefined,pdfFonts).download();
}
同时安装
npm install --save @types/pdfmake