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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 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
Session的工作方式
2006/10/09 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
JS中的this变量的使用介绍
2013/10/21 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python的装饰器使用详解
2017/06/26 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
pygame实现五子棋游戏
2019/10/29 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
中药专业自荐信范文
2014/03/18 职场文书
2015年信访工作总结
2015/04/07 职场文书
创业计划书之校园超市
2019/09/12 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Golang map映射的用法
2022/04/22 Golang
JavaScript实现音乐播放器
2022/08/14 Javascript