requireJs压缩合并路径问题

简介: 随着前端开发的重要性,以及业务的复杂性,前端的模块化开发也被大众所接收,最常见的js框架requireJs,一个js文件对应一个模块,方便开发人员调试与维护,但是一个文件对应一个模块增加了http请求,降低了网站的性能。幸运的是requireJs提供了压缩工具r.js(点击下载),r.js需要node(Node 0.4.0 或更高版本,点击下载)环境支持,安装完node就可以在命令行里对前端代码进行优化了。

描述


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


微信图片_20220509154743.jpg

幸运的是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进来的模块压缩进去


分类: requireJs

相关文章
|
5月前
|
JavaScript
vue项目打包后自动压缩成zip文件
vue项目打包后自动压缩成zip文件
415 0
|
SQL JavaScript 安全
|
7月前
|
JavaScript 前端开发
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
44 0
|
移动开发 编解码 资源调度
分集与路径合并方式
分集与路径合并方式
199 0
分集与路径合并方式
|
机器学习/深度学习 Java Linux
文件查找和压缩 | 学习笔记
快速学习文件查找和压缩。
122 0
文件查找和压缩 | 学习笔记
|
JavaScript Java
【Auto.js】[zip压缩] 将文件夹压缩成zip包
【Auto.js】[zip压缩] 将文件夹压缩成zip包
428 0
|
JavaScript
js实现给定图片路径自动下载
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/80434130 js实现图片自动下载 http://www.
1780 0
|
前端开发 JavaScript 数据格式
gulp之自动化静态资源压缩合并加版本号
gulp之自动化压缩合并加版本号 这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。 先把下面这里插件 npm i (插件名) -D 安装到项目环境内 gulp-sequence //顺序执行任务 gulp-csso //css压缩 gulp...
1868 0