zoukankan      html  css  js  c++  java
  • RequireJS 文件合并压缩

    RequireJS的define 以及require 对于我们进行简化JavaScript 开发,进行模块化的处理具有很大的帮助

    但是请求加载的js 文件会有一些影响,一般的处理是对于文件进行压缩,但是requirejs 的压缩不是简单的

    进行压缩就行。

    RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大,不但可以压缩js,css,甚至

    可以对整个项目进行打包。

    使用的方法为:

    1. 项目结构

      

    文件说明:

    model 中的为 定义的模块

    main.js  为页面加载需要使用的

    appinfo.js  内容为:

    define(function () {
    
    
        var appinfo = { name: "dalnog", age: 22 };
    
        return appinfo;
    
    
    });
    

    refjs.js    内容为:

    define(["model/user"], function (user) {
    
    
        var myinfo = {
    
            userinfo: user
        };
    
        return myinfo;
    
    });
    

    user.js   内容为:

    define(function () {
    
    
        var user = { name: "dalnog", age: 22 };
    
        return user;
    
    
    });

    index.htm  页面信息如下:

    <!DOCTYPE >
    <html  >
    <head>
        <title></title>
    </head>
    <body>
    
    
    //   压缩的使用方法
      <!--  <script   data-main="dalongappinfo-built" src="Scripts/require.js" type="text/javascript"></script>-->
    
    //   默认的使用方法
        <script   data-main="main" src="Scripts/require.js" type="text/javascript"></script>
    </body>
    </html>
    

    压缩的方法:

    1.  安装node

    2.  运行npm 安装 requirejs  自带r.js    

         命令为:  npm   install  -g  requirejs 

    3.   配置 命令文件  config.js

           信息为:

           

    ({
    
    baseUrl: ".",  ///  文件的路径
    
    name: "main",  ///  入口文件  就是main.js
    
    ///  实际压缩之后使用的js 文件
    out: "dalongappinfo-built.js"
    
    })
    

    4.  运行命令   node   r.js -o  config.js 

        之后生成对应的文件: dalongappinfo-built.js

    5. 使用:
         见上面的 index.htm

    命令参数解析:

    下面我们对命令分别来做一下解释:

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

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

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

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

  • 相关阅读:
    element表格添加序号
    ZOJ 3822 Domination(概率dp)
    HDU 3037(Lucas定理)
    HDU 5033 Building(单调栈维护凸包)
    HDU 5037 Frog(贪心)
    HDU 5040 Instrusive(BFS+优先队列)
    HDU 5120 Intersection(几何模板题)
    HDU 5115 Dire Wolf(区间dp)
    HDU 5119 Happy Matt Friends(dp+位运算)
    C++ string详解
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/4583331.html
Copyright © 2011-2022 走看看