源码出售

可视化的WEUI小程序工具-r.js压缩代码

HTML我帮您打造微信应用号小程序开发工具,傻瓜化、拖拽式操作即可生成应用号小程序,功能模块组件化,无需开发快速生成应用号小程序。微信小程序开发工具, 集成小程序所有组件,在线可视化UI设计。支持基本动画设定,满足全自由度设计,可导出标准代码供后续开发。

目前根据 WEUI组件库做好了顶部菜单、底部菜单、FLEX布局、九宫格、面板、图文列表、按钮、单行文本框、多行文本框、单选列表、多选列表、下拉列表、开关选 择等组件库。可以轻轻松松快速生成WEUI原型。

使用技术:requirejs+backbone+underscore+jquery+jqueryui+bootstrap+weui等技术。

HTML我帮您打造拖拽可视化的WEUI小程序工具(2)

HTML我帮您打造拖拽可视化的WEUI小程序工具(2)

为什么选型requirejs?
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
由于工具涉及到组件比较多样化,这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性。这样,你将获得一些具有互相依赖关系的JavaScript文件。仅仅需要在你的HTML文档中引用一个基于RequireJS的脚本文件,所有必须的文件都将会被自动引用到这个页面上.

不说模块化开发细节,在项目开发完成后,需要上线,但是模块太多了,一个个加载肯定不符合前端优化的要求。这会导致很多次请求(requests),即使这个些文件都很小,也会浪费很多时间。 可以通过合并这些脚本文件,以减少请求的次数达到节省加载时间的目的。

前端的优化原则是减少请求,合并压缩。那么写那么多的模块最后可定是要合并压缩起来的。这里就需要用到 RequireJS提供的r.js。r.js可以在安装RequireJS后的bin目录下可以找到。

r.js压缩代码常用的配置及命令


1. js的压缩

这次只是初步应用,如果有好的方法或有误的地方,还望各位大侠们指教.

第一种配置的文件: 需要把所有依赖的文件都压缩到当前代码中.


({
   baseUrl: "./",
   paths: {
       amd_modules: "../amd_modules",
       lib : "../lib"
   },
   name: "main",
   optimizeCss: "none",
   out: "index-built.js"
})



baseUrl: 指当前配置文件的路径

paths: 配置一些下面配置时需要的路径

name: 需要被压缩的文件

optimizeCss: none不压缩, standard标准压缩

out: 输出的文件

第二种配置的文件,去掉常用的库(单引用)


({
    mainConfigFile : "main.js",
    baseUrl: "./",
    paths : {
        amd_modules: "../amd_modules" ,
        lib: "../lib"
    },
    dir: "built",
    keepBuildDir: false,  //不复制依赖文件
    
    modules: [
        {
            name: "main",
            exclude: ["amd_modules/jquery/1.8.3/jquery", "lib/header/0.0.1/header"]
        }
    ]
})


dir: 输出目录的路径

modules: 压缩合并的模块,exclude: 筛选掉的文件,不被压缩到main的压缩文件里

执行代码:


node r.js -o config.js


2. css的压缩

第一种情况,直接压缩某个文件,执行代码

node r.js -o cssIn=index.css out=built/index.css

第二种情况,压缩多个文件

需要先将要压缩的文件放到一个css中,用@import引入,如下所示:存储文件为main.css

@import url("icons.css");
@import url("window.css");
@import url("tabs.css");
@import url("index.css");

执行代码:(标准压缩)

node r.js -o cssIn=main.css out=built/main.css optimizeCss=standard

先贴到这里,其实js压缩里有很多配置项,除上述配置外,比如如果有cdn引入的js如何配置; 需要压缩成多个文件等等; 还有压缩时需要包含那些文件和排除那些文件等等.





相关链接

发表评论