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   ,如需转载请自行联系原作者
相关文章
|
6月前
|
传感器 监控 算法
从开源代码入场无人机学术研究到商业化市场的全路径指南-优雅草卓伊凡
从开源代码入场无人机学术研究到商业化市场的全路径指南-优雅草卓伊凡
453 4
从开源代码入场无人机学术研究到商业化市场的全路径指南-优雅草卓伊凡
|
6月前
|
运维 数据挖掘 API
官方api和第三方api有什么区别
官方API与第三方API是电商商家常用的两种接口类型。官方API由电商平台提供,功能全面、集成度高、安全性强且稳定性好,适合处理核心业务;而第三方API由外部服务商提供,专注特定功能如支付、物流等,灵活性和扩展性更强,但安全性和稳定性参差不齐。商家应根据自身需求、预算及技术能力选择合适的API,确保数据安全与合规性,同时优化运营流程、提升用户体验并拓展业务功能,在竞争中占据优势。
450 0
|
弹性计算 Linux Apache
部署并使用Docker(Alibaba Cloud Linux 3)
本场景带您体验如何在Alibaba Cloud Linux 3.2104 LTS 64位操作系统的云服务器上部署并使用Docker。
|
缓存 JavaScript 前端开发
【Vue】模板语法,插值、指令、过滤器、计算属性及监听属性(内含面试题及毕设等实用案例)上篇
Vue 的模板语法是一种用于在 HTML 中声明式地渲染 Vue 组件的语法。它基于 HTML,并通过特定的模板语法扩展了 HTML。Vue 使用了一种称为 “Mustache” 语法的模板插值来绑定数据到 HTML 元素上。在 Vue 的模板语法中,你可以使用双大括号({{}})将数据绑定到 HTML 元素上,这样数据的值会被动态地替换到相应的位置。 在 Vue 的模板语法中,你可以使用双大括号({{}})将数据绑定到 HTML 元素上,这样数据的值会被动态地替换到相应的位置。
|
Python
python安装(3.7.0版本)
python安装(3.7.0版本)
271 0
python安装(3.7.0版本)
|
Web App开发
Debian 8镜像更新
信息摘要: Debian镜像提供8.11版本适用客户: 使用Debian镜像的用户版本/规格功能: Debian镜像提供8.11版本 镜像ID:debian_8.11_64_20G_alibase_20190311.
2856 0
|
JavaScript 开发者
vue组件实现原理解析(上)
组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性。本文我们一起从源码的角度,了解一下组件的底层实现原理。
|
算法
PCL点云特征描述与提取(1)
3D点云特征描述与提取是点云信息处理中最基础也是最关键的一部分,点云的识别。分割,重采样,配准曲面重建等处理大部分算法,都严重依赖特征描述与提取的结果。从尺度上来分,一般分为局部特征的描述和全局特征的描述,例如局部的法线等几何形状特征的描述,全局的拓朴特征的描述,都属于3D点云特征描述与提取的范畴, 特征描述与提取相关的概念与算法 1.
3146 0