小心!AngularJS结合RequireJS做文件合并压缩的那些坑


Posted in Javascript onJanuary 09, 2016

在项目使用了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结合RequireJS做文件合并压缩的那些坑

很关键的一个点就是,不压缩可以用,一旦压缩了(用了默认的压缩),使用就会报错。所以思考必定某些东西被“压坏”了,网上某些文章都说是需要下面这样写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, 这时才会合并第二层。

合并准备

1、安装nodejs

文件合并压缩基于nodejs,所以先安装nodejs。

2、下载r.js

r.js配合requirejs模块写法对文件进行合并,压缩。

简单配置

配置文件最好写一个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:配置属性还有很多,就不一细细说了。当文件配置好后,就执行命令合并压缩

node r.js -o build.js

总结

RequireJS模块的合并压缩还是比较简单的,但是遇到AngularJS,在压缩方面就有些问题了,目前没找到什么更好办法。

以上就是本文的详细内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
ECMAScript6--解构
Mar 30 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 #Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 #Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
JavaScript电子时钟倒计时
Jan 09 #Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
You might like
PHP动态图像的创建
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
PHP运行模式的深入理解
2013/06/03 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python多线程下载文件的方法
2015/07/10 Python
python if not in 多条件判断代码
2016/09/21 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Django rest framework实现分页的示例
2018/05/24 Python
django中related_name的用法说明
2020/05/20 Python
python怎么删除缓存文件
2020/07/19 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
销售行政专员职责
2014/01/03 职场文书
新学期开学演讲稿
2014/05/24 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
宇宙与人观后感
2015/06/05 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
优质护理服务心得体会
2016/01/22 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL