AngularJS结合RequireJS做文件合并压缩的那些坑
我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因。
1. build.js里面的paths必须跟main.js里面的保持一致。
这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件。在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的paths,省得合并的时候还要将paths拷贝过来(我试过build.js里面没有paths,是不能合并的)。(-_-!!!)
2. 某些依赖库需要写整个相对路径才能做合并。
在项目里, 我使用一个叫layer的第三方库(库是以requireJS define写的),一开始只做开发时候,在paths配置了路径后,使用此库只需要用个简称(define依赖时候)。 但在做合并时候,竟然提示文件不存在(因为直接拿简称去拼文件地址了),无奈之下只能修改这个库的使用办法,全部使用到这个库的都写整个相对路径,这个时候开发和做合并才没有错。
3. 合并之后可以运行,加上压缩就不可以。
这个是最严重问题,最严重问题,最严重问题。在文件合并压缩后,使用文件时候,AngularJS运行就不正常了,总是报模块初始化失败,Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e,如下图。
很关键的一个点就是,不压缩可以用,一旦压缩了(用了默认的压缩),使用就会报错。所以思考必定某些东西被“压坏”了,网上某些文章都说是需要下面这样写AngularJS cntroller、directive等,使用的服务用字符串定义。
commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){
可是我的整个应用就是这样定义,并没有给它注入错误的机会。最后在无奈之下,就只能配置mangle: false,不混淆变量名,这样做后,合并压缩的文件就能正确使用了!!!
PS:简单说法就是,合并压缩可以,变量名不能混淆(总觉得怪怪的),感觉问题暂时无解。
4. 第二层的require,做合并的时候,是合并不出来。
例如在mian.js里面这样加载模块,在合并时候会发现第二层的require并没有被合并到。
require([ "COMMON"], function(){
require([ "angular", "LOGIN" ], function(angular){
//....
});
});
这时需要在build.js加findNestedDependencies: true, 这时才会合并第二层。
合并准备
安装nodejs
文件合并压缩基于nodejs,所以先安装nodejs,下载地址: http://blog.nodejs.org/2013/07/25/node-v0-10-15-stable/
下载r.js
r.js配合requirejs模块写法对文件进行合并,压缩,下载地址: https://github.com/jrburke/r.js
简单配置
配置文件最好写一个build.js,如下:
({
baseUrl:"../",
paths: {
//...
},
shim: {
//...
},
optimize: "uglify2",
uglify2: {
mangle: false //false 不混淆变量名
},
findNestedDependencies: true,
name: "js/main",
out: "../js/main-built.js"
})
这里就讲几个关键属性:
baseUrl:所有的模块(般就是js)都相对于这个路径存在。
optimize:优化脚本文件的方式,有下面5种取值方式。
- uglify:(默认) 用UglifyJS压缩。
- uglify2: 用UglifyJS2( 2.1.2+)压缩。
- closure: 使用Google's Closure Compiler 简单优化模式压缩文件, 仅在优化工具使用Java有效。
- closure.keepLines:跟closure参数一样, 只不过保留换行符。
- none: 不做压缩。
findNestedDependencies:寻找require()里面的require或define调用的依赖。
PS:配置属性还有很多,就不一细细说了,有篇文章写得很详尽,地址:http://segmentfault.com/a/1190000002403806#articleHeader37
当文件配置好后,就执行命令合并压缩
node r.js -o build.js
总结
RequireJS模块的合并压缩还是比较简单的,但是遇到AngularJS,在压缩方面就有些问题了,目前没找到什么更好办法。
AngularJS结合RequireJS做文件合并压缩的那些坑的更多相关文章
- requireJS对文件合并与压缩(二)
requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 require ...
- RequireJS对文件合并与压缩实现方法
RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...
- RequireJS 文件合并压缩
RequireJS的define 以及require 对于我们进行简化JavaScript 开发,进行模块化的处理具有很大的帮助 但是请求加载的js 文件会有一些影响,一般的处理是对于文件进行压缩,但 ...
- gulp 之一 安装及简单CSS,JS文件合并压缩
最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...
- 使用System.Web.Optimization对CSS和JS文件合并压缩
在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.A ...
- 自己写IRP,做文件操作,遇到的坑
在写文件的时候没问题,但是写完文件之后,就出问题了, 什么问题呢,是因为写完文件之后,文件关闭之后, 调用了一个叫做 CcFlushCache 的函数,这个函数是从CcWriteBehind 调过来的 ...
- 介绍一种基于gulp对seajs的模块做合并压缩的方式
之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...
- 使用gulp对js、css、img进行合并压缩
1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...
- System.Web.Optimization 合并压缩技术的使用
捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.A ...
随机推荐
- poj3342Party at Hali-Bula(树形dp)
/* 树形dp! 判重思路: 当dp[v][0]==dp[v][1]时,很自然,flag[u][0]必然是有两种方案的.flag[u][1]则不然, 因为它只和dp[v][0]有关系.而若flag[v ...
- Mina、Netty、Twisted一起学(六):session
开发过Web应用的同学应该都会使用session.由于HTTP协议本身是无状态的,所以一个客户端多次访问这个web应用的多个页面,服务器无法判断多次访问的客户端是否是同一个客户端.有了session就 ...
- 开发笔记:基于EntityFramework.Extended用EF实现指定字段的更新
今天在将一个项目中使用存储过程的遗留代码迁移至新的架构时,遇到了一个问题——如何用EF实现数据库中指定字段的更新(根据UserId更新Users表中的FaceUrl与AvatarUrl字段)? 原先调 ...
- Bootstrap Magic – 轻松创建自己的 Bootstrap 主题
Bootstrap Magic 是一款基于 Bootstrap 和 AngularJS 的主题创建工具.您可以轻松地创建您自己的 Twitter Bootstrap 主题,可以立即看到你的内容变化.您 ...
- [Azure附录]2.在Windows Server 2012中配置AD域服务
<Windows Azure Platform 系列文章目录> 本章我们配置的AD域名为contoso.com 1.安装完AD域服务后,我们返回服务器管理器界面,点击"将此服务器 ...
- list的一些使用
list无数据判断 在一次判断中,我这样: if(list!=null){ ... } 结果发现list为空数据的时候不管用,后来发现,list只要创建实例就不会是null,但可以为empty,因此 ...
- python生成随机密码
有时候我们会想生成一个随机密码,这样我们通过Python中的一些随机方法,就可生成我们任意长度和复杂度的密码,代码如下: # -*- coding=utf-8 -*- import random im ...
- ASP.NET Core 开发-缓存(Caching)
ASP.NET Core 缓存Caching,.NET Core 中为我们提供了Caching 的组件. 目前Caching 组件提供了三种存储方式. Memory Redis SqlServer 学 ...
- Java/Android引用类型及其使用分析
Java/Android中有四种引用类型,分别是: Strong reference - 强引用Soft Reference - 软引用Weak Reference - ...
- iOS 阶段学习第九天笔记(内存管理)
iOS学习(C语言)知识点整理 一.内存管理 1)malloc , 用于申请内存; 结构void *malloc(size_t),需要引用头文件<stdlib.h>:在堆里面申请内存,si ...