当前位置: 首页 > news >正文

使用uglifyjs对静态引入的js文件进行压缩

前言

  • 因为有时候js文件没有npm包,或者需要修改,只能引入静态的js,那么这个时候就可以对js进行压缩了。
  • 我其实想通过vite、webpack等插件进行压缩的,可是他都不能定位到public目录下面的文件,所以我只能自己压缩了。
  • 编写下面的脚本可以放在vite、webpack配置文件中,但是不想这样操作,就是有没有这样的插件。欢迎评论推荐。

安装uglifyjs依赖

  • 我是直接手动,所以选择全局安装的方式。
npm install uglifyjs -g
  • 单个文件压缩
uglifyjs file.js -o out.js
  • 多个文件的压缩
    • 暂时没有找到命令,自己写了一个脚本
// index.js
const fs = require('fs');
const path = require('path');
const { exec } = require('child_process');

function getJSFiles(dir) {
    const files = [];
    function traverseDirectory(currentDir) {
        const entries = fs.readdirSync(currentDir, { withFileTypes: true });
        for (const entry of entries) {
            const entryPath = path.join(currentDir, entry.name);
            if (entry.isDirectory()) {
                traverseDirectory(entryPath);
            } else if (path.extname(entry.name) === '.js') {
                files.push(entryPath);
            }
        }
    }
    traverseDirectory(dir);
    return files;
}
function compressFile(file) {
    exec(`uglifyjs ${file} -o ${file}`, (error, stdout, stderr) => {
        if (error) {
            console.error(`执行命令时出错: ${error.message}`);
            return;
        }
        if (stderr) {
            console.error(`命令执行时出现错误: ${stderr}`);
            return;
        }
        console.log(`文件压缩成功: ${file}`);
    });
}
// 目录、可根据需要修改目录路径
const directoryPath = 'c:\\x\\x\\x'; 
const jsFiles = getJSFiles(directoryPath);
console.log(jsFiles);

for (const file of jsFiles) {
    compressFile(file);
}
  • 执行命令
# 修改成自己的文件名称
node index.js

效果

效果

  • 压缩率为1-(5.68/9.63)≈41.02%

相关文章:

  • 网站设计要先做图么论坛seo教程
  • 网站信息化建设存在的困难石家庄百度关键词搜索
  • 天津做网站贵吗石家庄网站关键词推广
  • 网络营销的含义和特点郑州网站优化
  • 域名注册的网站公司官网模板
  • 南宁网站公司58同城推广
  • 网络安全小知识课堂(十三)
  • css专题1-----给div盒子的边框添加阴影
  • 地质科研智能革命:当大语言模型“扎根”地质现场、大语言模型本地化部署与AI智能体协同创新实践
  • 项目管理中客户拒绝签字验收?如何处理和预防
  • ModelScope能干什么?
  • Java Comparable 接口详解
  • 在Windows搭建gRPC C++开发环境
  • 局域网访问 Redis 方法
  • springmvc:tomcat启动无报错但接口404问题排查
  • 国标GB28181视频平台EasyCVR顺应智慧农业自动化趋势,打造大棚实时视频监控防线
  • 2025上海CMEF:鱼跃以“AI+医疗”开启健康管理新纪元
  • java基础 流(Stream)
  • 按键++,--在操作uint8_t类型(一个取值为1~10的数)中,在LCD中显示两位数字问题
  • Vue知识点(5)-- 动画
  • 大脑功能与结构的解耦揭示了人类大脑的区域行为专门化
  • 实习技能记录【2】-----LVGL[基本概念]
  • opencv无法设置禁用RGB转换问题
  • centos练习docker<基础>
  • 蓝桥杯第十一届省赛C++B组真题解析
  • 特权FPGA之UART串口