我以为原来的想法是要求不同的文件,虽然较小是不好的做法？和一个优先大的js文件(最小化)并产生.
这是现在我如何安装SystemJS来加载单独的文件(见下文),这是现在推荐的方法吗？
System.config({
packages: {
app: {
format: 'register',defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null,console.error.bind(console));
开发中
单独的文件即时传输用于对每个文件进行测试,重新加载和/或热重新加载,而无需在每次更改之后进行整个应用程序包的整理.
在生产中
使用诸如Webpack和JSPM之类的工具,将各个文件进行折叠并组合成一个或多个捆绑包.
JSPM和Webpack(即从版本2开始)默认情况下都支持ES6模块,并且可以利用树状抖动(即通过rollup.js)来消除bundle输出中未使用的代码.
另外：最终,当大多数/所有服务器支持HTTP2,所有浏览器都支持ES6模块标准时,捆绑将成为一种反模式.绑定(即减少HTTP请求)的好处将不再是相关的,缺点(即缓存特性不佳,开发复杂度增加)将是不足够的理由.
树震动
通过减少文件导入来优化软件包,树状图可以跟踪所有应用程序的导入路径,以确定哪些代码将包含在输出中.
例如,如果您的应用程序使用Rxjs observables异步获取数据,则可以导入整个包.
import 'rxjs';
这很有效地开始,但效率不高.捆绑过程的树状抖动步骤没有办法确定哪个代码不被使用,因此整个Rxjs包将被包含在输出中.
要优化输出包大小,最好只导入应用程序代码中使用的Rxj的功能.
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators/map';
import { startWith } from 'rxjs/operators/startWith';
当树的摇动步骤运行时,它将仅包括Rxjs包中的代码,需要创建一个Observable并使用map和startWith运算符.
Transpilation
除了树木和捆绑之外,您还需要一种将ES6 / Typescript源转换为ES5的策略.传统上,使用诸如Grunt或Gulp这样的自动化工具手动指定为开发和生产而进行的转换,连接,缩小/缩小代码所需的步骤.
JSPM可以通过创建自行执行的包来处理所有这些
jspm bundle-sfx app/main dist/main --uglify
Webpack可以完成相同的操作
webpack -p app/main.js dist/main.js
除了ES6 / Typescript之外,这两种工具还可以利用装载机/插件来支持其他文件类型,如css和scss.