如何在SPA中只加载模块相关的内容

How to load only module related content in SPA?

本文关键字：模块 加载 SPA      更新时间：2023-09-26

我正在研究一个大型骨干单页应用程序，我们在</body>标记之前按顺序指定了所有JS文件。然后，在生产中，我们使用grunt-usemin连接并制作单个最小化的app.min.js文件用于生产。此外，所有模板都使用grunt-contrib-handlebars转换为JS，并连接到相同的app.min.js文件中。

随着代码的增长，app.min.js文件的大小已经上升到1.25MB，这个应用程序还有很长的路要走。还有许多主要部分有待开发。

同时，我不想在用户访问每个屏幕时加载5个或更多的JS文件和相同数量的模板。相反，我想要有模块和加载单个模块文件，用户可以浏览整个模块而不加载任何其他JS文件。

我还希望这些模块文件被最小化，优化和旋转(缓存破坏)生产

我正在查看require.js和它的优化器。我刚刚开始使用require.js实现我们的下一个模块之一，当我开始构建部署时，似乎rjs优化器创建了单个输出文件，这让我回到了原点。

是不可能做什么我正在寻找使用require.js，还是我错过了什么?或者有比require.js更好的解决方案吗?

注意:虽然使用loader有一个好处，即使一次加载一个大文件，当我只需要一个模块的代码时，我不想加载整个代码。

可以构建成多个文件。内部需求: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']
                    },
                ]


更新说明是的，这是单页应用程序。
这里有几件事要理解-每当你定义即define('app/test',['app/load1','app/load2'],function(load1Ref, load2Ref){})，新的脚本标签被添加到dom和一个数据-xyz =模块的名称即<script data-xyz = 'app/test' src = '' type='text/javascript'>被添加。我不记得xyz的名字了。
定义的返回值存储在上下文data-xyz中。所以当你需要(['app/test'])时，它会返回app/test脚本的data-xyz中存在的值。
现在，当你构建时，所有被引用的require和define都被构建到一个.js中。因此，通过上述操作，您可以拥有多个构建，在其中您可以提到每个构建应该包含或排除哪些定义。
所以这些构建不是所有的javascript文件缩小和编译成一个/多个文件。根据您需要的文件，您需要包含这些构建文件。
如果你需要'build2ReqFile1'，'build2ReqFile2'，那么你可以只包括build2.js在你的代码，如果你想骨干和下划线随着'build2ReqFile1'，'build2ReqFile2'，那么你需要包括build2.js和build1.js

清楚吗?

相关文章：