requireJs压缩合并路径问题

简介: 描述 随着前端开发的重要性,以及业务的复杂性,前端的模块化开发也被大众所接收,最常见的js框架requireJs,一个js文件对应一个模块,方便开发人员调试与维护,但是一个文件对应一个模块增加了http请求,降低了网站的性能。

描述

随着前端开发的重要性,以及业务的复杂性,前端的模块化开发也被大众所接收,最常见的js框架requireJs,一个js文件对应一个模块,方便开发人员调试与维护,但是一个文件对应一个模块增加了http请求,降低了网站的性能。

 

 

幸运的是requireJs提供了压缩工具r.js(点击下载),r.js需要node(Node 0.4.0 或更高版本,点击下载)环境支持,安装完node就可以在命令行里对前端代码进行优化了。

1.可以在命令行执行,如下:

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

2.也可以建一个配置文件,如build.js,代码如下:

{
    appDir: "../js",
    baseUrl: "../js",
    dir: "../dist",
    optimize: "uglify",
    optimizeCss: "standard.keepLines",
    mainConfigFile: "../js/main.js",
    removeCombined: true,
    fileExclusionRegExp: /^\./,
    modules: [
        {
            name: ""
        },
        {
            name: ''
        }
    ]
}

这时只需在命令行中输入:

node r.js -o build.js

注意:r.js和build.js放在同一个文件夹

配置参数

({
    appDir: '../client',
    baseUrl: 'js',

    /*paths:{//baseUrl
        app: 'app'
    },*/
    //该路径以当前路径为起点
    dir: '../client-build',

    // Include the main configuration file.
    //该路径以当前路径为起点
    mainConfigFile: "./js/main.js",

    //加上下面这个modules,完成的是合并操作
    //路径apppDir + baseUrl + main.js
    //模块的入口文件,会从./client/js/main.js中寻找其所有的依赖项,并把他们合并成一个js文件
    modules:[
        {
            name:'config'
        }],
    // Output file.
    //out: "./js/config.js",

    // Root application module.
    //name: "config",
    removeCombined:true,
    optimizeCss:'standard',
    // Do not wrap everything in an IIFE.
    wrap: false,

    //optimize (none/uglify/closure) 是否压缩,默认设置为optimize = uglify,
    //none (OK:经测试,该参数正解)只合并不压缩,可以压缩成一个文件,但文件里面依旧保留格式,方便调试的时候查看代码
    //uglify 只压缩不合并 (亲测,既压缩又合并)
    //closure 压缩而且合并(亲测,合并不压缩)
    //optimize:"closure",

    //合并后的文件,顶部会自动生成一堆说明性的文字,包括版权啊,等等,加了下面的参数,则不再生成
    preserveLicenseComments: false,
    //

    //下面两组的作用是 把js文件中的console.log删除
    pragmas: {  cacheBust: false },
    onBuildWrite: function (moduleName, path, contents) {
       // return contents;
         return contents.replace(/console.log(.*);/g, '');
    }
})

点击这里查看完整配置参数

常见问题

压缩合并后会出现路径错误问题,主要是因为,js代码位置变了,例如:

模块a中动态加载样式,压缩后,模块a整合到其他模块中,路径发生变化

这时需要修改js代码,动态判断路径,或者在调用模块时封装模块,通过require加载模块也能解决问题,因为r.js不会把require进来的模块压缩进去

相关文章
|
人工智能 算法 安全
探索人工智能在医疗诊断中的应用及挑战
本文深入探讨了人工智能在医疗诊断领域的现状、应用及其面临的伦理和技术挑战。通过分析AI技术如何辅助医生进行疾病诊断,提高诊断的准确性和效率,文章揭示了AI在医疗影像分析、基因检测、风险评估等方面的潜力。同时,指出了数据隐私、算法透明度、医患关系变化等挑战,并对未来AI与医疗健康的融合趋势进行了展望。
485 1
|
11月前
|
机器学习/深度学习 人工智能 算法
《C++与 Armadillo:线性代数助力人工智能算法简化之路》
线性代数是构建人工智能模型的基础,涉及矩阵乘法、特征分解等运算。C++作为高效编程语言,在AI开发中占据重要地位。Armadillo库为C++提供了强大的线性代数支持,具备高效性、易用性和丰富功能,简化了AI算法的实现。本文深入探讨如何利用Armadillo库优化线性代数运算,提高AI算法的开发效率和性能。
260 10
|
11月前
|
缓存 数据库 索引
所有的接口都需要幂等吗?
幂等性(Idempotency)源自数学,指多次执行某操作结果不变。在计算机科学中,它确保在网络通信、重试机制和并发操作下系统状态一致。常见应用如HTTP方法中的GET、PUT、DELETE及数据库操作中的SELECT、UPDATE、DELETE等。实现幂等性可通过唯一请求ID、数据库约束、状态检查等方法。并非所有业务都需要幂等处理,需根据业务逻辑、系统容错策略及性能复杂度权衡。
149 0
|
消息中间件 Cloud Native Java
10 个开源项目、47 个课题可选丨欢迎报名阿里云云原生开源之夏
10 个开源项目、47 个课题可选丨欢迎报名阿里云云原生开源之夏
|
Java 程序员 开发工具
程序员的职业发展路径,广大学生可以重点关注
@[TOC](目录) 程序员的职业发展路径可以分为以下几个阶段,每个阶段都有不同的职位和技能要求: # 1. 初级程序员 职位:软件开发工程师、初级程序员、实习生等。 技能要求: - 掌握至少一种编程语言,如 Java、Python、C++ 等; - 熟悉基础的数据结构和算法; - 熟悉常用的开发工具,如 IDE、版本控制工具等; - 具备基本的代码编写和调试能力; - 了解软件开发流程,如需求分析、设计、开发、测试等。 # 2. 中级程序员 职位:软件开发工程师、中级程序员、技术支持等。 技能要求: - 掌握至少一种高级编程语言和框架,如 Django、React、S
790 0
|
Java 关系型数据库 MySQL
#3,Android Studio Android开发APP的开发语言和APP连接的数据库 总结
#3,Android Studio Android开发APP的开发语言和APP连接的数据库 总结
|
安全 C#
阿里云域名新注、续费、转入收费价格表(最新版)
阿里云域名价格表包括域名注册、域名续费及域名转入价格,不同时期的收费价格是不一样的,本文整理了2022年最新版的阿里云域名新注、续费、转入收费价格表,可供读者参考!
4483 0
阿里云域名新注、续费、转入收费价格表(最新版)
|
存储 消息中间件 大数据
OPPO 数仓与数据湖融合架构升级的实践与思考
过去几年,数据仓库和数据湖方案在快速演进和弥补自身缺陷的同时,二者之间的边界也逐渐淡化。云原生的新一代数据架构不再遵循数据湖或数据仓库的单一经典架构,而是在一定程度上结合二者的优势重新构建。在云厂商和开源技术方案的共同推动之下,2021 年我们将会看到更多“湖仓一体”的实际落地案例。InfoQ 希望通过选题的方式对数据湖和数仓融合架构在不同企业的落地情况、实践过程、改进优化方案等内容进行呈现。本文,InfoQ 采访了 OPPO 云数架构部部长鲍永成,请他与我们分享 OPPO 引入数据湖和数仓融合架构的探索工作和实践中的一些思考。
893 0
OPPO 数仓与数据湖融合架构升级的实践与思考
|
数据采集 人工智能 运维
袁清茂:数据互联 打造山西交控智慧交通新动能 | 阿里CIO学院名人堂
数字化产生的影响比我们想象的更快更深入。数字化转型已经不是要不要的问题,而是抓紧时间建,如何建的问题。
袁清茂:数据互联 打造山西交控智慧交通新动能 | 阿里CIO学院名人堂
|
弹性计算 调度 云计算
案例分享——追光动画|学习笔记
快速学习 案例分享——追光动画
577 0
下一篇
oss云网关配置