在requireJS中捆绑

Question

我是requireJS的新手,并且学习它以便我可以在我当前的应用程序中使用它.
在阅读requireJS的API文档时,我遇到了bundle(http://requirejs.org/docs/api.html#config-bundles)作为requireJS的配置选项

requirejs.config({
    bundles: {
        'primary': ['main', 'util', 'text', 'text!template.html'],
        'secondary': ['text!secondary.html']
    }
});

require(['util', 'text'], function(util, text) {
    //The script for module ID 'primary' was loaded,
    //and that script included the define()'d
    //modules for 'util' and 'text'
});

API说明:
如果进行构建并且构建目标不是现有模块ID,或者如果构建的JS文件中的加载程序插件资源不应由加载程序插件加载,则Bundles config很有用.

但在这里,我无法理解为什么我们需要捆绑,何时应该使用它？

Answer 1

构建大型SPA(单页应用程序)时,必须连接并缩小文件.这样做的问题在于,你可能会得到一个大小的缩小的js文件,它可以达到几兆.

为了解决这个问题,需要引入捆绑功能,它允许您将文件打包到多个捆绑包中,并且只在需要时才加载这些捆绑包.

因此,例如,如果您有一个包含'home'和'about'的页面,您可以创建一个类似于的包:

bundles: {
        'home': ['home', 'util', 'text', 'text!home.html'],
        'about': ['text!about.html']
    }

然后只有在您实际点击about页面时才会提供about页面资源.这样你就会得到懒惰的资源加载.

有关更好的解释和示例,请观看此精彩视频:http://vimeo.com/97519516

相关部分约为39分钟.