使用require.js構建優化項目實踐

嘗試用本身主頁的簡單代碼構建優化下。
在文件夾requirejs-optimizer下新建三個文件夾：tools，www和www-built。tools存放r.js和build.js，www放須要構建的項目代碼，www-built爲構建目標文件夾。

www下代碼結構：

js/main-index.js爲require.js的入口文件：

requirejs.config({
    paths:{
        jquery: 'jquery.min',
        pikachoose: 'jquery.pikachoose'
    },
    shim:{
        pikachoose:{
            deps: ['jquery'],
            exports: 'PikaChoose'
        }
    }
});

requirejs(['jquery','pikachoose'],function($,pikachoose){
    $("#pikame").pikachoose({
        showCaption: false,
        transition: [7,7,8],
        animationSpeed: 1500
    });
    $("#pikame2").pikachoose({
        showCaption: false,
        transition: [8,7,7],
        animationSpeed: 1500
    });
});

本來jquery我是使用CDN的，構建以後出錯了，提示jquery is not defined，是由於pikachoose依賴於jquery，若是使用CDN，須要確保jquery比pikachoose先加載，但我還未找到要如何設置，因此先把jquery下載到本地，和pikachoose一塊兒構建。
tools/build.js的配置信息：

{
    appDir: "../www", 
    baseUrl: "js",
    paths: {
        jquery: "jquery.min",
        pikachoose: "jquery.pikachoose"
    },
    shim: {
        pikachoose: {
            deps: ["jquery"],
            exports: "PikaChoose"
        }
    },
    dir: "../www-built",
    optimizeCss: "standard", //css優化參數設定
    modules: [
        {
            name: "main-index"
        }
    ]
}

詳細的build.js配置能夠參考example.build.js，有很詳細的介紹每一個參數的配置狀況。我另一篇博文require.js構建優化有簡單說了下，構建的命令，其實上require.js的官網，看api有更詳細的內容。構建後www-built目錄下的內容：

和www目錄結構同樣，除卻js和css，其餘格式的文件和文件夾從www拷貝過來，不一樣的是，css樣式文件內容被壓縮，main-index.js配置下用到的模塊依賴壓縮合併到main-index.js中。