angularjs – SystemJS(angular2.0)：加载单独的文件,最小化一个
|
我对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. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |