zoukankan      html  css  js  c++  java
  • 使用r.js打包js文件

    之前的文章里有介绍requirejs的基本使用方法,但是直接使用requirejs会暴露出一个问题,就是当模块过多的时候,requirejs就会引入许多js文件,大大的增加了请求数,那么有的朋友就要说了,我们自己压缩那些模块文件不就行了么,其实仔细想想这样到底行不行,答案是行!但是很麻烦:

    1. 首先一般我们写模块时不会去定义模块名字,因为模块名字默认就是js文件名字,如果自己手动去写模块名,就增加了额外的工作量。

    2. 加载顺序的问题,自己手动压缩,就要严格把控好模块的先后顺序(特别是有jquery及jquery插件的情况下),否则很容易出错。

    针对这些问题,requirejs给出了解决方案,就是r.js,r.js就是针对用requirejs进行模块化开发后的打包压缩问题的。r.js下载

    那么下面就来介绍如何使用r.js来打包压缩我们的模块们:

    1. 把r.js放在我们的项目根目录中。

    2. 新建一个built.js,内容如:

    ({
        baseUrl: './static/scripts/src/',
        name: "../../../main",
        paths: {
            'jquery': "vendor/jquery/jquery",
            'jquery.email': "plugin/jquery.email",
            'aaa': "moudle/aaa/aaa",
            'bbb': "moudle/bbb/bbb",
            'ccc': "moudle/ccc/ccc"
        },
        shim: {
            'jquery': {
                exports: "$"
            },
            'jquery.email': {
                deps: ["jquery"],
                exports: "jQuery.fn.hEmail"
            }
        },
        out: "main-built.js",
    })

     built其实就是一个打包压缩的配置文件,这里我用的是之前文章初始requirejs(一)中的例子,这样看built.js的代码是不是很熟悉,就像require的配置js一样?事实就是差不多的,那我们来解释下不大一样的部分,name其实就是那个requirejs的入口文件,output就是打包之后的文件名,还有个叫dir的属性,我这里没有使用,是用来配置输出的文件目录的(比如dir: ../production,这样就直接输出到生产环境了),当然还有其他的属性,这里就不介绍了,详细请参考官网

    下面我们来看看输出过程:

    最后生成了main-built.js文件,然后我们试着把原先代码引用的地方替换掉,

    <script data-main="main-built.js" src="static/scripts/src/vendor/require/require.js"></script>

    结果,页面还是能正常显示,模块还是正常加载的,而且我们的js引用就变成了一个,大大的减少了请求数,完美!

  • 相关阅读:
    做一点,记一点 ~ JQuery EasyUI使用小结(注意点)
    做一点,记一点 ~ Java调用Oracle存储过程
    Linux中定时执行DB2的存储过程
    Apache POI -- Java 导出Excel文档(笔记)
    一篇很不错的学习Flex的入门级教程
    Java的String和StringBuffer和StringBuilder详解
    Java操作properties文件
    认识WebService
    J2EE安全策略:为tomcat页面设置访问权限(j_security_check)
    MyEclipse 2014常用设置
  • 原文地址:https://www.cnblogs.com/junhua/p/4397766.html
Copyright © 2011-2022 走看看