SystemJS（angular2.0）：加载单独的文件VS减少一个大的JS？

Question

我有点困惑与问候SystemJS，似乎它会自动加载单独的文件，不编译和减少这些成一个大的js文件。

我认为最初的想法是让不同的文件的请求，虽然是小不好的做法？和首选大js文件（minimified）和生产来代替。

这就是我已经安装了SystemJS现在加载单独的文件（见下文），这是现在这样的建议呢？

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

Answer 1

System.js（即ES6模块标准）改变开发流程

开发中

单独的文件+上即时transpilation被用来制造测试，重装和/或单个文件的热重新装载工作，而无需transpile /每次更改后构建整个应用程序包。

在生产

在独立的文件被transpiled并组合成使用利用工具如的WebPack和JSPM一个或更多的束。

既JSPM和的WebPack（即，作为版本2）支持ES6模块通过默认，并可以利用树摇动（即，经由rollup.js），以消除在该束输出无用的代码。

旁白：最终，当HTTP2被大多数/所有服务器支持和ES6模块标准原生浏览器支持，捆绑销售将成为一个反模式。捆绑（即减少HTTP请求）的好处将不再是相关的，以及存在缺陷（即差的高速缓存特性，增加了开发的复杂性）将是足够的理由不使用它。

树摇动

而不是通过减少文件导入，树摇痕迹应用程序的所有进口路径，以确定哪些代码将被包含在输出优化包。

例如，如果您的应用程序使用Rxjs观测异步获取数据，你可以导入整个包。

import 'rxjs';

这能很好地上手，但它的效率不高。树摇动捆扎方法的步骤没有一种方法来确定哪个代码|不使用所以整个Rxjs包将被包含在输出中。

为了优化输出束尺寸将优选只导入在应用程序代码中使用的Rxjs的特征。

import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators/map';
import { startWith } from 'rxjs/operators/startWith';

当树摇步运行，这将只包括从所需要的Rxjs包中的代码创建一个Observable并使用map和startWith运营商。

Transpilation

除了树摇晃和捆绑，你还需要一个策略来transpile的ES6 /打字稿源ES5。传统上，自动化工具，如步兵或咕嘟咕嘟手动用于指定transpile所需的步骤，并置，缩小/丑化用于开发和生产的代码。

JSPM可以通过创建一个自动执行的包处理这一切

jspm bundle-sfx app/main dist/main --uglify

的WebPack也能完成同样

webpack -p app/main.js dist/main.js

除了ES6 /打字稿transpilation，这两个工具也可以利用装载机/插件，以支持其他文件类型，如CSS和SCSS。