require.js构建优化

rayliao

想摸透javascript模块化编程是怎么一回事,在seajsrequirejs之间兜兜转转,看了许多相关资料和文章,算是大致理清它们的异同,撇开requirejs加载方式的另类(其实目前我暂时还没去感受),于写法,比较喜欢requirejs的写法,这个比较主观,这也得益于阮一峰大大那篇Javascript模块化编程(三):require.js的用法,讲得很清楚,反而我看seajs的文档,反而迷迷糊糊。

其实模块化编程不难理解,主要我还是卡在了构建工具,压缩合并的优化上,虽然seajs官网上有很多相关教程,但我就是不理解,简直被自己蠢哭了。后来看到requirejs上有例子,就决定啃英文教程试一下。

需要用到nodenpm,我直接在github上clonerequirejs的例子create-template-master所以可以跳过r.js的安装:

npm install -g requirejs
r.js -o app.build.js

例子已经有build.jsapp目录也已经搭建好,所以只需要下面一条命令,就自动帮你构建了。

node r.js -o build.js

build.js是命令行配置参数文件,所以可以把build.js里面的配置参数直接写在上面那条命令的后面。like this:

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

看下build.js里面怎么写:

{
    "appDir": "../www",     //待构建文件目录
    "baseUrl": "lib",       //和require.js里面基目录(baseUrl)一样
    "paths": {              //路径指定,如下用app代替../app  
        "app": "../app"
    },
    "dir": "../www-built",  //构建目标文件目录
    "modules": [            //这个应该是模块配置,name表示入口文件
        {
            "name": "app"
        }
    ]
}

这是构建的log:
请输入图片描述
可以对比一下构建前后,打开www/index.htmlwww-built/index.html的js加载有什么不同。
未构建之前,全部js分开加载。
请输入图片描述
构建之后,只需要加载require.jsapp.js
请输入图片描述
构建之后,js已经是压缩合并的了,main.jsmessages.jsprint.js都合并到了app.js里面。


css的优化,得再看下require.js的示例,然后再写篇笔记记录下来。

阅读 7.3k

以梦为码
以梦为码

前端渣滓

3.1k 声望
48 粉丝
0 条评论

前端渣滓

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