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,在压缩方面就有些问题了,目前没找到什么更好办法。

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5116355.html

时间: 2024-10-16 18:06:20

AngularJS结合RequireJS做文件合并压缩的那些坑的相关文章

AngularJS分别RequireJS做文件合并压缩的那些坑

小心!AngularJS合并RequireJS做文件离开压缩的那些坑 小心!AngularJS合并RequireJS做文件离开压缩的那些坑,各人正在做文件离开压缩的时辰一定要注意,感乐趣的网友可以参考一下正在项目运用了AngularJS框架,用RequireJS做异步模块加载(AMD),正在做文件离开压缩时,遇到了一些坑,有些只是搞定了,但不大白原因. 那些坑1. build.js内里的paths必须跟main.js内里的保持等同. 这个build.js便是r.js运用的设置文件,而main.j

RequireJS对文件合并与压缩实现方法

RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 本文为大家讲解的是requireJS对文件合并与压缩的实现方法,感兴趣的同学参考下. RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 requireJS

requireJS对文件合并与压缩(二)

requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 requireJS对互相依赖模块进行合并与压缩,可以对JS,CSS压缩,甚至可以对整个项目进行打包.r.js是基于nodeJS的,所以本机电脑上需要有node环境. 下面还是来看看我整个项目结构吧,如下: 现在是这样的,app/a.js,app/b.js,app/c.js,app/d.js,有依赖关系,分别是a依

使用System.Web.Optimization对CSS和JS文件合并压缩

在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.App_Start添加: public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Themes/Homecss&q

自己写IRP,做文件操作,遇到的坑

在写文件的时候没问题,但是写完文件之后,就出问题了, 什么问题呢,是因为写完文件之后,文件关闭之后, 调用了一个叫做 CcFlushCache 的函数,这个函数是从CcWriteBehind 调过来的, 顿时懵逼了,什么情况,怎么会进入刷缓存的函数,和缓存有鸡毛关系, 这是我至少半年前的代码了,因为当初没有使用到这块,所以就没有测试这块, 结果现在要用,SB了,咋办, 看代码没啥问题啊.但是就是蓝屏,稳定蓝屏. 哎, 该谁的事,找谁去, 翻了一下ntoskrnl,找到了NtWriteFile函数

介绍一种基于gulp对seajs的模块做合并压缩的方式

之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题.然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的应

System.Web.Optimization 合并压缩技术的使用

捆绑和压缩原理是:将多个css文件动态合并和压缩为一个css文件.多个js文件动态合并和压缩为一个js文件,如此达到减少浏览器对服务器资源文件的请求数量.缩小资源文件的尺寸来提高页面反应速度的目的.ASP.NET 4.5及以上版本支持此技术(Optimization). 使用方法: 先下载包Microsoft.AspNet.Web.Optimization,然后配置做以下配置:  第一步:照惯例,在App_start文件夹下新建类,如图: 这里有个参数“BundleTable.EnableOpt

使用grunt完成requirejs的合并压缩和js文件的版本控制

最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据 r.js 封装的 grunt 插件. 安装 gr

RequireJS模块化后JS压缩合并

使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包. r.js的压缩工具使用UglifyJS或Closure Compiler.默认使用UglifyJS(jQuery也是使用它压缩).此外r.js需要node.js环境,当然它也可以运行在Java环境中如Rhino.JAVA环境使用Ant构建可以参考另外一篇RequireJ