我正在开发一个大型骨干单页面应用程序,我们在</body>
标记之前按顺序指定了所有JS文件。然后,为了生产,使用grunt-usemin
我们连接并制作单个缩小的app.min.js文件以进行生产。此外,所有模板都使用grunt-contrib-handlebars
转换为JS并连接到相同的app.min.js文件中。
随着代码的增长,app.min.js文件的大小已经增加到1.25MB,而且这个应用程序还有很长的路要走。有许多主要部分尚待开发。
同时,当用户访问每个屏幕时,我不想加载5个或更多JS文件和相同数量的模板。相反,我想拥有模块并加载单个模块文件,用户可以浏览整个模块而无需加载任何其他JS文件。
此外,我希望缩小和优化这些模块文件,并将revved(用于缓存清除)用于生产
我正在查看require.js并且它是优化器。我刚刚开始使用require.js实现我们的下一个模块之一,当我开始构建部署时,似乎r.js优化器创建单个输出文件,这让我回到原点。
是不是可以使用require.js做我正在寻找的东西,还是我错过了什么?或者有没有比require.js更好的解决方案?
注意:虽然there is a benefit of using loader even though single big file is loaded at once,但我不想在只需要一个代码模块时加载整个代码。
答案 0 :(得分:1)
您可以构建多个文件。 在requirejs中:compile:options:执行以下操作
modules: [
{
name: '../build1',
include: [
// 3rd party libs
'backbone', //the reference to these files are present in paths: property
'underscore'
]
},
//build 2
{
name: '../build2',
include: ['build2ReqFile1','build2ReqFile2'],
// Excludes all nested dependencies and built dependencies from "common"
exclude: ['../build1','build2UnReqFile1']
},
//build 3
{
name: '../build3',
include: ['build3ReqFile1','build3ReqFile2'],
// Excludes all nested dependencies and built dependencies from "common"
exclude: ['../build1','../build2','build3UnReqFile1']
},
]
更新说明
是的,这是单页申请
这里很难理解 - 无论何时定义ie define('app/test',['app/load1','app/load2'],function(load1Ref, load2Ref){})
,都会在dom中添加新脚本标记,并添加data-xyz =模块名称,即<script data-xyz = 'app/test' src = '' type='text/javascript'>
。我不记得xyz的名称是什么。
define的返回值存储在context data-xyz中。因此,当您需要([&#39; app / test&#39;])时,它会返回app / test脚本的data-xyz中的值。
现在,在构建时,引用的所有需求和定义都内置在一个.js中。通过执行上述操作,您可以拥有多个构建,其中您可以提及这些单独构建中应包含或排除的每个定义。
因此,这些构建并不是将所有javascript文件缩小并编译成一个/多个文件。根据您需要的文件,您需要包含这些构建的文件。
如果您需要&#39; build2ReqFile1&#39;,&#39; build2ReqFile2&#39;那么你可以在你的代码中包含build2.js,如果你想要骨干和下划线以及&#39; build2ReqFile1&#39; build2ReqFile2&#39;那么你需要包含build2.js和build1.js
是否清楚?