requirejsr.js优化

我正在使用requirejs开发一个应用程序。该应用程序使用页面客户端路由框架。实际上，它是一个使用哈希标签路由器的单页应用程序

index.html
----app
--------global
--------modules
--------router
--------config.js
--------main.js
----vendor
----bower_compenents
----images
----css

索引将加载main.js文件，该文件将加载配置和路由器。 main.js将如下所示

requirejs(['./config'], function (config) {
    "use strict";

    require(['router/router']);

},function(err){
    console.log(err);
});

js将使用哈希标记加载控制器和其他模块

我的疑问是如何使用r.js构建应用程序？我不想包含bower_components和vendor文件夹中的任何内容，其中包含jquery、下划线等框架。只需要包含应用程序文件夹中的文件

这是我的配置文件

requirejs.config({
    waitSeconds: 0,
    paths: {
        async: '../bower_components/requirejs-plugins/src/async',
        map: 'https://maps.googleapis.com/maps/api/js?v=3.exp',
        linkedin : '//platform.linkedin.com/in.js?async=true',
        gapi: 'https://apis.google.com/js/client:platform',
        facebook: '//connect.facebook.net/en_US/sdk', 
        jquery: '../bower_components/jquery/dist/jquery.min',
        jqueryui: '../bower_components/jquery-ui/jquery-ui.min',
        cookie:'../vendor/jquery.cookie',
        page: '../bower_components/page/page',
        polyglot: '../vendor/jquery.polyglot.language.switcher',
        bootstrap : '../bower_components/bootstrap/dist/js/bootstrap.min',
        text : '../bower_components/requirejs-text/text',
        validate : '../bower_components/jquery-validation/dist/jquery.validate',
        datatables : '../vendor/jquery.dataTables.min',
        dataresp : '../vendor/dataTables.responsive.min',
        typeahead : '../bower_components/typeahead.js/dist/typeahead.bundle',
        underscore : '../bower_components/underscore/underscore-min',
        camera : '../vendor/camera',
        qs: '../vendor/qs',
        sweetAlert : '../bower_components/sweetalert/dist/sweetalert.min',
        colorbox : '../bower_components/jquery-colorbox/jquery.colorbox-min'
    },
    shim: {
        'polyglot': {
            exports: 'polyglot',
            "deps" : ['jquery']
        },
        'map': {
            exports: 'map'
        },
        'facebook' : {
            exports: 'FB'
        },
        'linkedin' : {
            exports: 'IN'
        },
        'gapi':{
            exports :'gapi'
        },
        'cookie': {
            "deps" : ['jquery']
        },
        'datatables':{
            "deps" : ['jquery']
        },
        'dataresp' :{
            "deps" : ['jquery' , 'datatables']
        },
        'bootstrap':{
            "deps" : ['jquery']
        },
        'validate':{
            "deps" : ['jquery']
        },
        'underscore': {
            exports : '_'
        },     
        'camera':{
            exports: 'camera',
            "deps" : ['jquery', 'jqueryui']
        },
        'colorbox' : {
            exports : 'colorbox',
            "deps" : ['jquery']
        }

    }
});

---

可以找到完整的r.js示例构建文件acn。实际上，你可以通过两种方式来实现。一个是将所有js和html文件压缩为一个文件。这是一种常见的r.js压缩方法，可以减少对服务器的请求

另一种方法是缩小每个文件，而不合并整个文件。在这种情况下，请求的数量不会减少，但文件的大小会减少

第一种情况你可以试试

    ({
   mainConfigFile : "app/config.js",
    baseUrl: "./app",
    out: "../build/app/main.js",

    optimizeCss : "none",
    optimize: "uglify2",
    name: 'main',
    removeCombined: true,
    findNestedDependencies: true,
})

第二个你可以用

({
    appDir: "./",
    baseUrl: "app",
    dir: "../../build",
    modules: [
        {
            name: "main"
        }
    ],
})

最好是用大口喝你需要的东西。在gulp中创建一个任务，并将只需要的文件复制到其他文件夹，然后使用第二种方法构建应用程序。这样，其他文件将不会被优化