RequireJS优化项目

之前介绍了使用requireJS如何去实现代码模块化,今天再来讲讲在requireJS项目中如何合并和压缩js和css文件。

这里有两种方法:一种手动创建build.js;另一种使用CMD命令直接压缩。

这两种方法有个必要条件:必需在项目中引入r.js文件,下载地址:https://github.com/requirejs/r.js

下载好后,复制到项目目录下。

手动创建build.js

({

// app顶级目录,非必选项。如果指定值,baseUrl则会以此为相对路径

appDir: './'

// 模块根目录。默认情况下所有模块资源都相对此目录。

// 若该值未指定,模块则相对build文件所在目录。

// 若appDir值已指定,模块根目录baseUrl则相对appDir。

,baseUrl: './'

// 指定输出目录,若值未指定,则相对 build 文件所在目录

,dir: './dist'

//一个包含多个对象的数组。每个对象代表一个将被优化的模块(module)。

,modules: [

{

name: 'demo1'

}

,{

name: 'demo2'

}

]

// 不优化某些文件

,fileExclusionRegExp: /^(r|build)\.js$/

// RequireJS Optimizer会自动优化应用程序下的CSS文件 。CSS 优化方式,目前支持以下几种:

// none: 不压缩,仅合并

// standard: 标准压缩,移除注释、换行,以及可能导致 IE 解析出错的代码

// standard.keepLines: 除标准压缩外,保留换行

// standard.keepComments: 除标准压缩外,保留注释 (r.js 1.0.8+)

// standard.keepComments.keepLines: 除标准压缩外,保留注释和换行 (r.js 1.0.8+)

,optimizeCss: 'standard'

//是否移除已经合并的文件

,removeCombined: true

// 设置模块别名

// RequireJS 2.0 中可以配置数组,顺序映射,当前面模块资源未成功加载时可顺序加载后续资源

,paths: {

a:'demo1'

,b:'demo2'

,c:'demo3'

}

//配置模块依赖。为那些没有使用define()声名依赖关系及设置模块值的模块,配置依赖关系与“浏览器全局”出口的脚本

,shim:{

c:{

exports: 'yjs'

}

}

})

然后,通过CMD执行node命令执行build.js :node r.js -o build.js

这样会创建出一个新的文件夹,你会发现里面的代码都是压缩过的。

通过CMD使用node命令直接创建build.js文件:

node r.js -o baseUrl=./ name=index out=build.js

-o:表示优化,该参数是固定的,必选。

baseUrl:指存模块的根目录,可选。

name:模块的入口文件,这里是app,那么r.js会从baseUrl+name去查找app.js,然后找出所有依赖的模块,然后进行合并与压缩。

out:指合并压缩后输出的文件路径,这里是直接输出在根目录下build.js 我们也可以输出到其他目录下 比如js/app 目录下,也可以的。

运行命令后你会发现目录下多出了一个build.js文件,然后在你的html文件中引入build.js文件:

即可,打开浏览器调试页面,你会发现请求的文件数变少了,通过这个方法减少浏览器http的请求次数

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180719G0KMJF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券