四时宝库

程序员的知识宝库

前端静态资源处理之js压缩(前端 压缩)

由于前段时间发布的云静Admin-通用后台框架,涉及的功能模块大部分是由js实现的,所以小编想统一将这些文件进行压缩处理,以减少加载静态资源造成的网络延迟,提高页面打开的响应速度。

云静Admin-通用后台预览:

http://uadmin.yunj.net.cn/admin

开发文档:

https://www.kancloud.cn/worklz/yunj_admin_universal/2009454

鉴于该框架构建于ThinkPHP上,所以决定使用php结合uglify来实现js文件的批量压缩。

实现前提:需安装php和nodejs运行环境,及uglify-es(因为js涉及es6语法,方法:npm i uglify-es -g

压缩效果及部分脚本源码截图如下:

创建脚本文件uglifyjs.php(源码放在文章末尾)

使用方法:可在控制台直接执行php uglifyjs.php来压缩所有指定的js文件,亦或指定压缩js文件数组中的某些文件,如压缩form.js使用:php uglifyjs.php form.js即可

脚本文件uglifyjs.php完整源码如下:

<?php

// 文件处理
function fileHandle($filename){
    $newFilename=str_replace('.js','.min.js',$filename);
    exec("uglifyjs {$filename} -m -o {$newFilename}");
    echo $filename."\n";
}

// js文件数组
$path='public/static/yunj/js/';
$arr1=glob("{$path}*.js");
$arr2=glob("{$path}/modules/*.js");
$arr3=glob("{$path}/modules/cols/templet/*.js");
$arr4=glob("{$path}/modules/field/*.js");
$arr5=glob("{$path}/modules/templet/*.js");
$filenameArr=array_merge($arr1,$arr2,$arr3,$arr4,$arr5);

// 指定修改的文件名,如:php uglifyjs.php form.js
unset($argv[0]);
$updateFilenameArr=$argv;

foreach ($filenameArr as $filename) {
    // 判断是否压缩文件
    if(strstr($filename,'.min.js')) continue;
    // 判断是否置顶修改文件名
    if($updateFilenameArr){
        $isUpdateFilename=false;
        foreach ($updateFilenameArr as $updateFilename){
            if(!strstr($filename,$updateFilename)) continue;
            $isUpdateFilename=true;
            break;
        }
        if(!$isUpdateFilename) continue;
    }
    fileHandle($filename);
}

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接