RequireJS程序打包

使用 RequireJS 可以将我们的 JavaScript 代码轻易的分割成苦干个模块(module),方便我们的开发与维护。但是在生产环境中,如果将所有的 JavaScript 文件分离,会导致很多次请求(requests),即使这个些文件都很小,也会浪费很多时间。 

所以在生产环境中,我们可以通过合并这些脚本文件,以减少请求的次数达到节省加载时间的目的。

1,r.js 介绍

RequireJS 提供了一个打包压缩工具 r.js,它是一个能运行基于 AMD 的项目的命令行工具,可以用来实现对模块的合并压缩。

2,功能特点

RequireJS Optimizer 有很多用处。它不仅能够优化单个 JavaScript 或单个 CSS 文件,也可以优化整个项目或只是其中的一部分,甚至多页应用程序(multi-page application)。它还可以使用不同的缩小引擎(minification engines)或者干脆什么都不用(no minification at all),等等。

3,安装配置

(1)访问其 GitHub 主页:https://github.com/requirejs/r.js 并下载到本地。

(2)将 dist 文件夹下的 r.js 复制到项目文件夹下即可。

4,打包

根目录下新建build.js文件,如下图所示:

({
    baseUrl: './js',
    dir: './dist',
    modules: [
        {
            name: 'main'
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'standard',
    removeCombined: true,
    paths: {
        CusorWidget: 'empty:',
        InterestPoint:'empty:',
        MeasureWidget: 'empty:',
        resourceURL: 'empty:',
        ScanShowWidget:'empty:',
        SceneManager: 'empty:',
        SearchWidget:'empty:',
        StatisticsWidget:'empty:',
        VectorLayer:'empty:',
        Zlib: 'empty:',
        SuperMap: 'empty:',
        jquery: "empty:",
        echarts: 'empty:',
        dark: 'empty:',
        drag: 'empty:',
        easyui: 'empty:',
        colorPicker: 'empty:',
        spectrum: 'empty:',
        Cesium: "empty:"
    }
})


参数说明:

  • appDir:应用程序的目录(即 <root>)。在这个文件夹下的所有文件将会被复制到 dir 参数标注的文件夹下。
  • baseUrl:相对于 appDir,代表查找文件的锚点(that represents the anchor path for finding files)。
  • dir:这是一个输出目录,所有的应用程序文件将会被复制到该文件夹下。
  • modules:一个包含多个对象的数组。每个对象代表一个将被优化的模块(module)。
  • fileExclusionRegExp:任何与此规则匹配的文件或文件夹都将不会被复制到输出目录。由于我们把 r.js 和 build.js 放置在应用程序目录下,我们希望优化器(optimizer)排除这两个文件。 因此我们可以这样设置 /^(r|build)\.js$/。
  • optimizeCss:RequireJS Optimizer 会自动优化应用程序下的 CSS 文件。这个参数控制 CSS 最优化设置。具体可选值见上方 css 部分。
  • removeCombined:如果为 true,优化器(optimizer)将从输出目录中删除已合并的文件。
  • paths:模块(modules)的相对目录。
  • shim:为那些没有使用 define() 声名依赖关系及设置模块值的模块,配置依赖关系与“浏览器全局”出口的脚本。

打开命令行,执行 node r.js -o build.js 

参考:http://www.hangge.com/blog/cache/detail_1704.html 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值