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）来消除捆绑输出中未使用的代码。

除此之外：最终，当大多数/所有服务器都支持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。

SystemJS（angular2.0）：加载单独的文件与最小化一个大JS？

1 个答案: