Requirejs r.js 优化

Question

我正在使用 requirejs 开发应用程序。该应用程序使用页面客户端路由框架。实际上它是一个使用哈希标签的单页应用程序 router.The 应用程序结构是这样的

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);
});

router.js 将使用散列标签加载控制器和其他模块。

我的疑问是如何使用 r.js 构建应用程序？我不想包含 bower_compenents 和 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']
        }

    }
});

Answer 1

已找到完整的 r.js 个示例构建文件 acn here。实际上你可以通过两种方式做到这一点。一种是将所有的 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来满足您的需要。在 gulp 中创建一个任务，只将需要的文件复制到其他文件夹，然后使用第二种方法构建应用程序。这样其他文件就不会优化了。

Requirejs r.js 优化

Requirejs r.js optimization

requirejs

require

r.js