捆绑在requireJS中 [英] bundles in requireJS

问题描述

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

  requirejs.config({捆绑: {'primary':['main'，'util'，'text'，'text！template.html']，'secondary':['text！secondary.html']}});require(['util'，'text']，function(util，text){//模块ID为'primary'的脚本已加载，//并且该脚本包含define()//'util'和'text'的模块}); 

API说明:
如果执行构建且该构建目标不是现有的模块ID，或者如果已构建的JS文件中包含不应由加载程序插件加载的加载程序插件资源，则捆绑配置很有用.

但是在这里我无法理解为什么我们需要捆绑软件以及何时使用捆绑软件?

解决方案

构建大型SPA(单页应用程序)时，必须串联并缩小文件.这样做的问题是，您最终可能会得到一个庞大的缩小的js文件，该文件可能会增大到几兆.

为了解决此问题，require引入了捆绑功能，该功能允许您将文件打包为多个捆绑，并且仅在需要时才加载.

因此，例如，如果您的页面上有首页"和关于"，则可以创建如下所示的包:

 套装:{'home':['home'，'util'，'text'，'text！home.html']，'关于':['text！about.html']} 

，然后仅当您实际单击About页面时才提供About页面资源.这样，您就可以懒惰地加载资源.

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

相关部分在39分钟左右.

I am new to requireJS and tring to learn it so that i can use it in my current application.
While reading API documentation of requireJS, I came across bundles (http://requirejs.org/docs/api.html#config-bundles) as configuration option of 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 Explanation :
Bundles config is useful if doing a build and that build target was not an existing module ID, or if you have loader plugin resources in built JS files that should not be loaded by the loader plugin.

But here I am not able to understand that why we need bundle and when we should use use it?

解决方案

When building a large SPA (Single Page App), it is imperative that you concatenate and minify your files. The problem with doing it, is that you might end up with one massive minified js file that can get as large as a few megs.

In order to solve this, require introduces the bundle feature, which allows you to pack your files in several bundles, and those would be loaded only when needed.

So, for example if you have a page with 'home' and 'about', you can create a bundle like:

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

and then the about page resources would only be served when you actually click the about page. That way you get lazy loading of resources.

For better explanation and example, watch this great video: http://vimeo.com/97519516

The relevant part is around the 39 min.

这篇关于捆绑在requireJS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！