如何使用 requirejs 加载缩小的 concatinated js 文件

Question

我是 grunt 和文件优化的新手。我将一些 JavaScript 个文件（使用 grunt concat）组合成一个文件 release.js，然后将其缩小为 release.min.js。

现在我正在使用 requirejs 脚本加载组合文件（它们是 jQuery ui 小部件）。

我的问题是，这样做是否正确？四次引用 release.min.js 看起来有点奇怪。这会导致 requirejs 加载 release.min.js 四次吗？还是只有一次？多次加载一个大的缩小文件是很愚蠢的。

requirejs.config({
baseUrl: '/site/scripts',
shim: {
    layout: {
        deps: ['jquery', 'jquery-ui']
    } ,
    serviceTraining:  {
        deps: ['jquery', 'jquery-ui']
    },
    serviceMail:  {
        deps: ['jquery', 'jquery-ui']
    },
    forms:  {
        deps: ['jquery', 'jquery-ui']
    }
},

paths: {       
    layout: 'custom/release/release.min',
    forms: 'custom/release/release.min',
    serviceTraining: 'custom/release/release.min',
    serviceMail: 'custom/release/release.min'
    }
});

require(['layout', 'serviceMail', 'serviceTraining', 'forms'], function() {

$(function() {

    // theme
    var layoutPlugin = $( "body" ).layout({ siteName: "Website name", domainName: "website.com" });
    layoutPlugin.layout( "init" );

    // Forms
    var formsPlugin = $( "body" ).forms();
    formsPlugin.forms( "init" );

    // Load mail services
    var serviceMail = $.services.serviceMail();
    serviceMail.subscribe( $(".form--subscribe") ); 
    // Subscribe to the  MailChimp e-mail list
    serviceMail.contact( $(".form--contact") );

    // Register for training
    var serviceTraining = $.services.serviceTraining();
    serviceTraining.register( $(".form--training-register") );

});

});

一如既往，欢迎所有建议。谢谢！

Answer 1

有两个指向同一个文件的 paths 一般来说 是获取加载错误的好方法。（我说 "in general" 因为可能有特定的情况会起作用。不过这只是运气。你不应该这样做。）

您应该做的是使用 bundles 配置选项而不是 paths：

bundles: {       
'custom/release/release.min': ['layout', 'forms', 
                               'serviceTraining', 'serviceMail']
}

这告诉 RequireJS，当你想加载数组中四个模块中的任何一个时，它应该加载模块 custom/release/release.min 来找到它们。

如何使用 requirejs 加载缩小的 concatinated js 文件

How to load a minified concatinated js file with requirejs

javascript

jquery

jquery-ui

requirejs

gruntjs