angularjs – SystemJS(angular2.0)：加载单独的文件,最小化一个大的JS？

我对SystemJS有点混淆,似乎它会自动加载文件,并且不会编译并将其最小化为一个大的js文件.

我以为原来的想法是要求不同的文件,虽然较小是不好的做法？和一个优先大的js文件(最小化)并产生.

这是现在我如何安装SystemJS来加载单独的文件(见下文),这是现在推荐的方法吗？

System.config({
            packages: {
                app: {
                    format: 'register',defaultExtension: 'js'
                }
            }
        });
        System.import('app/main')
                .then(null,console.error.bind(console));

System.js(即ES6模块标准)改变了开发工作流程

开发中

单独的文件即时传输用于对每个文件进行测试,重新加载和/或热重新加载,而无需在每次更改之后进行整个应用程序包的整理.

在生产中

使用诸如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.