Question

我正在开发一个大型骨干单页面应用程序，我们在</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，但我不想在只需要一个代码模块时加载整个代码。

Answer 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

是否清楚？

如何在SPA中仅加载与模块相关的内容？

1 个答案: