使用require.js构建优化项目实践

rayliao

尝试用自己主页的简单代码构建优化下。
在文件夹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中。

阅读 5.4k

以梦为码
以梦为码

前端渣滓

3.1k 声望
48 粉丝
0 条评论

前端渣滓

3.1k 声望
48 粉丝
文章目录
宣传栏