SystemJS(angular2.0):加载单独的文件与最小化一个大JS？

Question

我对SystemJS有点困惑,它似乎自动单独加载文件,不编译并将这些最小化为一个大的js文件.

我认为最初的想法是要求不同的文件,虽然较小的是不好的做法？和一个首选的大型js文件(最小化)并生成.

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

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

Answer 1

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

开发中

单独的文件+即时转换用于使单个文件的测试,重新加载和/或热重新加载工作,而无需在每次更改后转换/构建整个应用程序包.

在生产中

使用Webpack和JSPM等工具将各个文件转换为一个或多个包.

JSPM和Webpack(即版本2)都默认支持ES6模块,并且可以利用树抖动(即通过rollup.js)来消除bundle输出中未使用的代码.

除此之外:最终,当大多数/所有服务器都支持HTTP2并且所有浏览器本身都支持ES6模块标准时,捆绑将成为反模式.捆绑(即减少HTTP请求)的好处将不再相关,并且缺点(即缓存特性差,开发复杂性增加)将足以使用它.

树摇晃

树抖动不是通过减少文件导入来优化bundle,而是跟踪所有应用程序的导入路径,以确定哪些代码将包含在输出中.

例如,如果您的应用程序使用Rxjs observables异步获取数据,则可以导入整个包.

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

除了树摇动和捆绑之外,您还需要一个策略来将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.