seajs模块压缩问题与解决方法实例分析


Posted in Javascript onOctober 10, 2017

本文实例讲述了seajs模块压缩问题与解决方法。分享给大家供大家参考,具体如下:

在优化整理项目代码时,想使用seajs来把代码模块化。看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题。等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁闷了。

于是单步调试一把,发现模块一直加不进来。看了一下seajs的原码,明白了是怎么回事。

define模块解析依赖有两种途径,一种是从define(id, deps, factory)中的deps来;还有一种是解析define代码,从require中来。来看一下代码:

Module.define = function (id, deps, factory) {
 var argsLen = arguments.length
 // define(factory)
 if (argsLen === 1) {
  factory = id
  id = undefined
 }
 else if (argsLen === 2) {
  factory = deps
  // define(deps, factory)
  if (isArray(id)) {
   deps = id
   id = undefined
  }
  // define(id, factory)
  else {
   deps = undefined
  }
 }
 // Parse dependencies according to the module factory code
 if (!isArray(deps) && isFunction(factory)) {
  deps = parseDependencies(factory.toString())
 }
 ...

如果传了deps那就不进行解析了,如果传那就进行源码解析:

var REQUIRE_RE = /"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g
var SLASH_RE = /\\\\/g
function parseDependencies(code) {
 var ret = []
 code.replace(SLASH_RE, "")
   .replace(REQUIRE_RE, function(m, m1, m2) {
    if (m2) {
     ret.push(m2)
    }
   })
 return ret
}

seajs是对源码正则对比,查找require,也就是说require在seajs模块中,是一个关键字。

那么问题就来了,一般我们使用的压缩工具都变量进行压缩,require不是标准的js关键字,所以经过一压缩require就变成了abcdefg....所以自然就无法使用了。

解析办法有两个:

1. seajs官方给出是seajs标准模块构建工具:https://github.com/seajs/seajs/issues/538 使用spm进行构建。

2. 更换压缩工具,使用一个可以自定义关键字,也就是让压缩工具不压缩require变量。

目前主流的三个压缩工具:YUI Compressor,Google Closure Compiler,UglifyJS。就目前所知,貌似前两个都不支持自定义关键字(?),UglifyJS是支持的。所以可以使用UglifyJS进行压缩

UglifyJS hello.js -o hello.min.js -m -c -r require

通过-r选项来指定变量不压缩。

总的来说使用seajs应该尽量的去使用官方的构建工具。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
使用node.js搭建服务器
May 20 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
vue如何截取字符串
May 06 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
基于vue的换肤功能的示例代码
Oct 10 #Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 #Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 #Javascript
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
JavaScript如何获取到导航条中HTTP信息
Oct 10 #Javascript
使用Dropzone.js上传的示例代码
Oct 10 #Javascript
React中上传图片到七牛的示例代码
Oct 10 #Javascript
You might like
投票管理程序
2006/10/09 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
js不是基础的基础
2006/12/24 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
javascript数组去重的六种方法汇总
2015/08/16 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python实现图片筛选程序
2018/10/24 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python中如何使用虚拟环境
2020/10/14 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
开业典礼主持词
2014/03/21 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS