angular - SystemJS(angular2.0): Loading separate files vs minimize one big 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)消除捆绑输出中未使用的代码。

另外:最终，当大多数/所有服务器都支持HTTP2并且所有浏览器都原生支持ES6模块标准时，捆绑将成为一种反模式。捆绑的好处(即减少HTTP请求)将不再适用，而不利的一面(例如，较差的缓存特性，增加的开发复杂性)将成为不使用它的理由。

摇树

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

例如，如果您的应用程序使用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运算符。

编译

除了摇晃和捆绑以外，您还需要一种将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。

关于angular - SystemJS(angular2.0): Loading separate files vs minimize one big JS?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35523288/