Angular 在需要时加载库

在Angular 8应用程序中，我的组件有一个可以导出到excel文件的表格。我正在使用xlsx库来实现这一点。webpack bundle analyzer显示xlsx库使用了我总块大小的65%

由于导出功能很少使用，我想将其从初始捆绑包中排除，以提高大多数用户的性能，并在用户单击“导出”时加载它，而他们无论如何都需要等待下载

这就是我目前拥有的：

import * as xlsx from 'xlsx';
...
exportToExcel(filename, worksheet) {
   const ws: xlsx.WorkSheet = xlsx.utils.json_to_sheet(this.tableData);
   const wb: xlsx.WorkBook = xlsx.utils.book_new();
   xlsx.utils.book_append_sheet(wb, ws, worksheet);
   xlsx.writeFile(wb, filename+'.xlsx');
}

我会这样想象：

exportToExcel(filename, worksheet) {
   loadScript('/scripts/xlsx.js').then(xlsx => {
      const ws: xlsx.WorkSheet = xlsx.utils.json_to_sheet(this.tableData);
      const wb: xlsx.WorkBook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(wb, ws, worksheet);
      xlsx.writeFile(wb, filename+'.xlsx');
   })       
}

---

有办法吗？或者您还有其他建议吗？

类似的建议可能会有所帮助：

exportExcel() {
        import("xlsx").then(xlsx => {
            const worksheet = xlsx.utils.json_to_sheet(this.products);
            const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
            const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
            this.saveAsExcelFile(excelBuffer, "products");
        });
}

---

从

中，您可以如下所示在angular中延迟加载任何脚本库

"scripts": [
  {
    "input": "path/to/your/lazy-script.js",
    "lazy": true,
    "bundleName": "lazy-loaded-script"
  },
]

1。指定要延迟加载的特定脚本，angular将只输出一个包，而不会将其添加到index.html

而不是angular.json中的简单字符串

"scripts": [
        "src/some-script.js"
      ]

可以通过以对象格式指定脚本来实现这一点。如下

"scripts": [
  {
    "input": "path/to/your/lazy-script.js",
    "lazy": true,
    "bundleName": "lazy-loaded-script"
  },
]

注意：您还必须指定输出名称（bundleName），以便以后能够引用它。如果不这样做，Angular CLI将随机生成一个捆绑包名称，该名称将在每次构建时更改

2。要加载我们的脚本，我们首先创建一个新方法loadExternalScript（scriptURL），它将返回一个承诺，如下所示

"scripts": [
  {
    "input": "path/to/your/lazy-script.js",
    "lazy": true,
    "bundleName": "lazy-loaded-script"
  },
]

loadExternalScript（脚本URL:string）{
返回新承诺（解决=>{
const scriptElement=document.createElement（'script'）；
scriptElement.src=scriptUrl；
scriptElement.onload=解析；
document.body.appendChild（scriptElement）；
});
}

调用方法加载脚本，如下所示：

this.loadExternalScript('url/to/your/scripts').then(() => {}).catch(() => {});