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 相关文章推荐
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
Javascript中神奇的this
Jan 20 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
基于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
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python解析xml中dom元素的方法
2015/03/12 Python
Python实现的选择排序算法示例
2017/11/29 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
理货员的岗位职责
2013/11/23 职场文书
交通事故调解协议书
2014/04/16 职场文书
社区党建工作方案
2014/06/10 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
html实现弹窗的实例
2021/06/09 HTML / CSS