Question

本地应用程序运行良好，一旦它在服务器上大约50％的时间jquery库加载速度不够快，应用程序会抛出一堆未定义的js错误，因为任何jquery相关。我正在使用backbone.js与jquery，jquery mobile，jquery ui和required.js。 require js文件看起来是否正确，或者有没有办法在启动应用程序之前判断脚本是否已加载？

require.config({

paths: {
    jquery: 'libs/jquery/jquery-1.7.2',
'jquery.ui':'libs/jquery-ui/jquery-ui-1.8.14.custom',
    'jquery.mobile-config': 'libs/jqm/jquery.mobile-config',
    'jquery.mobile': 'libs/jqm/jquery.mobile-1.1.1',
    underscore: 'libs/underscore/underscore-1.3.3',
    backbone: 'libs/backbone/backbone-amd-0.9.2',
text: 'libs/require/text',
    templates: '../templates'
},

shim: {
    'underscore': {
        exports: "_"
    },
    'backbone': {
        deps: ['jquery','underscore'],
        exports: 'Backbone'
    },
    'jquery.ui': {
        deps:['jquery']
    },
    'jquery.mobile-config': {
        deps: ['jquery']
    },
    'jquery.mobile': {
        deps:['jquery','jquery.mobile-config']
    },
    'bundles': {
        deps:['jquery','jquery.mobile','validate','jquery.ui']
    },
},

waitSeconds: 5

});

require([
    'app'
], function(App) {
    $(function() {
        clearInitialLoader();
        App.initialize();
    });
});

Answer 1

虽然我没有使用underscore，但在特定网页上需要时，我还需要requireJS提取大量插件。花了一段时间让它与Jquery Mobile一起工作，但这就是我的应用程序运行的方式（而且我没有再收到任何错误，所以随意复制）

1）将requirejs添加到页眉

<script type="text/javascript" data-main="../js/main" src="../js/libs/require/require.js"></script>

2）我正在使用overrides.js，其中包含：

// pre-sets
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});

你需要这个，因为jquery mobile将在require.js之前触发（mobileinit与docready），这可能是你所有问题的原因= JQM在其他所有内容加载和渲染之前开始运行，所以您必须从应用程序控制器（我的app.js）

手动触发JQM

3）我的main.js配置

var IS_LOCAL  = /(:\/\/localhost|file:\/\/)/.test(document.location.href);     

requirejs.config({  
         waitSeconds :  (IS_LOCAL? 2 : 45)
      ,  baseUrl:       "../js"
    //,  enforceDefine: true    
      , paths: { 
              app:          'app'
            , overrides:    'overrides'
            , jquery:       'libs/jquery/jquery.min'
            , jqm:          'libs/jquery-mobile/jquery-mobile.min'
            , multiview:    'services/multiview/multiview.min'
            , respond:      'services/respond/respond.min'
            , klass:        'services/klass/klass.min'
            }
      , shim: {
              'overrides':        { deps: ['jquery'] }
            , 'klass':            { deps: ['jquery'] }
            , 'jqm':              { deps: ['jquery'], exports: 'mobile' }
            ,  'services/multiview/multiview.min' :           { deps: ['jquery', 'jqm'] }
            ,  'services/add2home/add2home.min' :             { deps: ['jquery'] }
            ,  'services/datatables/datatables.min' :         { deps: ['jquery'] }
            ... more ... 
            ,  'services/respond/respond.min' :               { deps: ['jquery'] }
                }
        });

    requirejs([ 'overrides', 'jquery', 'jqm', 'multiview', 'respond', 'app'], 
        function( $, overrides, mobile, multiview, respond, App){ 
            App.start();                
            });

4）然后我有一个app.js我为每个插件运行应用程序并需要app.js (config files）。这样我可以按需加载。看起来像这样：

define([], function(){
    var start = function() {
        require([ 'overrides', 'jquery', 'jqm','multiview', 'respond' ],function() {

        // your magic goes here...

        // request a plugin:
        $(document).on('pagebeforeshow.add2home', '#login', function() {
            // add2Home - trigger once and lock
            var dom = $('html');
            if ( dom.jqmData('bound') != true ) {
                dom.jqmData('bound', true);
                require(['services/addtohome/app'], function (App) {
                    App.render();
                    });
            };
         });

        // don't forget to trigger JQM manually
        if ( $.mobile.autoInitializePage == false){
            $.mobile.initializePage();
        }
        }); // end require
    } // end start
    return {"start":start};
});

5）这会调用插件app.js配置文件，其中包含所有插件配置。看起来像这样：

define(['services/addtohome/app', 'services/addtohome/addtohome.min'], function( app, addtohome ) {
function render() {

    if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) { 
        var addToHomeConfig = { 
            touchIcon:true,
            animationIn: 'bubble',
            animationOut: 'drop',
            returningVisitor: 'true',
            expire: '10',       
            }; 
        };
    };
return {
    render:render
    };          
});

当然，您需要的脚本越多，所需的时间就越长，但这种设置可以很好地拉动压缩+ gzipped 132k的Javascript。

Answer 2

因此，在现场网站中，您应该拼接和缩小资源。在AMD设置中有太多资源实际上尝试在实时站点中按需下载它们。 AMD模块是开发时的便利，而不是部署解决方案。

就模块订单而言，我从来没有运气使用过。我们发现，最好的方法是将外部依赖项包装在AMD包装器中。是的，这意味着如果您更新外部库，则需要重新执行此操作，但实际上并不像您想象的那么大。

首先包装库

//underscore.js file
define(function(){
  //underscore code
  return underscore
})

然后您可以将它包含在任何地方，并获得订单保证AMD加载的所有好处：

//backbone.js (or any other file that wants underscore)
define([underscore],function(_){
  //backbone code
  return Backbone
})

Answer 3

您应该查看shim options，以便按顺序加载模块。

此外，您可以使用require.js optimizer将所有文件连接成一个。

jquery / jqueryui / jquerymobile在backbone.js应用程序中加载速度不够快

3 个答案: