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编程开发中的五个实用小技巧
Jul 22 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
vue实现评论列表功能
Oct 25 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
php5 图片验证码实现代码
2009/12/11 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery使用方法
2017/02/04 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
jQuery实现轮播图效果
2019/11/26 jQuery
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
python发送邮件实例分享
2017/07/28 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python flask搭建web应用教程
2019/11/19 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
高中化学教学反思
2014/01/13 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL