如何使用 JSPM 使用缩小的第三方 Javascript 文件答案

【问题标题】：How to use minified third party Javascript files using JSPM如何使用 JSPM 使用缩小的第三方 Javascript 文件
【发布时间】：2017-06-12 10:54:14
【问题描述】：

我的应用程序正在使用 JSPM 和 SystemJS 进行模块加载，并且正在使用 angular。

我的 config.js 文件有如下角度图：

"angular": "github:angular/bower-angular@1.5.8"

所以当我执行import angular from 'angular' 时，我会从 config.js 文件中指定的 Path 获取 angular.js 文件。这很好。

现在的要求是我想在应用程序中使用缩小的第三方 javascript 文件 (angular.min.js)。但是jspm中没有缩小文件registry
所以我的应用程序的初始加载时间很长，因为有很多大文件，例如加载时间过长的 angular.js、browser.js 等。

我知道，我可以使用jspm bundle 递归地缩小所有依赖文件，其中也包括供应商的文件。但我的问题是：

1 - 是否可以将供应商的缩小文件 (angular.min.js) 直接与 JSPM 一起使用？最好使用供应商的缩小文件而不是我们自己缩小它们，不是吗？

2 - 如果以上一个是不可能的，那么我怎样才能只捆绑我的应用程序特定文件并且仍然能够使用（单独捆绑）缩小的 angular.js 文件？

这里推荐的方法是什么？

【问题讨论】：

【解决方案1】：

在您的 config.js 文件中，您可以映射任何具有名称的文件，并通过 SystemJs 在浏览器中导入它

所以你可能会做类似的事情

"angular": "jspm_packages/...../angular.min" (你的文件路径)

但是，推荐的方法是捆绑和缩小所有供应商文件，并且如您所述，分别捆绑您的应用程序特定文件

您可以使用 Gulp 或 Grunt 之类的工具来生成 2 个文件

网上有很多关于如何做到这一点的示例，但这里有一个可以帮助您入门 https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/

一旦您生成了这两个文件，您就可以通过脚本标签将它们添加到您的 html 页面中

<script src="Your File Path"></script>

选项 2 是首选方法，我建议您花时间进行设置，因为您只需进行一次即可了解它

【讨论】：