通义灵码-搭建js在线压缩网页

于 2025-04-10 14:49:52 发布
阅读量924 收藏 19
点赞数 19
CC 4.0 BY-SA版权
分类专栏： 日常积累 文章标签： javascript AI编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sleepingboy888/article/details/147097641

通义灵码-搭建js在线压缩网页

使用背景

使用js代码编写浏览器插件，部署的时候需要压缩js代码，为了方便使用，在自己的服务器上搭建一个js代码压缩工具。
AI编码工具在最近比较流行，我也使用阿里的“通义灵码”体验一下。效率不错，分享下过程。

开发步骤

  • 开发工具 VSCode（打开vscode，Ctrl+Shift+P，输入configure language就会出现自带的语言设置选项了，可修改为中文。）

  • 打开插件页面，搜索通义灵码（TONGYI Lingma），找到通义灵码后点击安装。
    在这里插入图片描述

  • 本地创建文件夹jscompress（文件夹名称可以自己定义），在vscode中打开该文件夹。在页面的左侧菜单能看到“通义灵码”的菜单。点击登录“个人版”，会打开浏览器，网页上输入用户名和密码（没有账号可以注册一个）。
    在这里插入图片描述

  • 登录成功以后网页会提示“登录成功”，再回到vscode就可以使用了。
    在这里插入图片描述

  • 和聊天一样，我简单描述了任务：我想个人服务器上部署一个在线压缩js代码的网页，能显示压缩前后的代码，能下载压缩后的代码，谢谢！（可以更详细一些，我只需要简单的压缩，所以要求很简单。）
    在这里插入图片描述

  • 基本内容是：后端部分 (Node.js + Express + Terser)；前端 (HTML + JavaScript)；

  • 默认服务器是linux系统，后端(Node.js + Express)，先安装npm，node.js(这个也可以问AI，重点不在这里我就不展示了)。将代码根据推荐的文件名保存到本地。

服务端 server.js：

const express = require('express');
const Terser = require('terser');
const app = express();
const port = 3000;

app.use(express.json({ limit: '5mb' }));

app.post('/compress', async (req, res) => {
    const { code } = req.body;
    if (!code) {
        return res.status(400).json({ error: 'No code provided' });
    }
    try {
        const compressed = await Terser.minify(code);
        if (compressed.error) {
            return res.status(500).json({ error: compressed.error.message });
        }
        res.json({ compressedCode: compressed.code });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

app.use(express.static('public'));

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

前端代码 index.html（相关的js代码直接写到了html文件）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Code Compressor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
        }
        button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>JS Code Compressor</h1>
    <input type="file" id="fileInput" accept=".js">
    <button onclick="compressFile()">Compress</button>
    <button onclick="downloadCompressedFile()">Download Compressed File</button>
    <h2>Original Code</h2>
    <textarea id="originalCode" readonly></textarea>
    <h2>Compressed Code</h2>
    <textarea id="compressedCode" readonly></textarea>

    <script>
        let originalCode = '';

        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    originalCode = e.target.result;
                    document.getElementById('originalCode').value = originalCode;
                };
                reader.readAsText(file);
            }
        });

        async function compressFile() {
            if (!originalCode) {
                alert('Please upload a JS file first.');
                return;
            }
            try {
                const response = await fetch('/compress', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ code: originalCode })
                });
                const result = await response.json();
                if (result.error) {
                    alert('Error compressing code: ' + result.error);
                } else {
                    document.getElementById('compressedCode').value = result.compressedCode;
                }
            } catch (error) {
                alert('Error compressing code: ' + error.message);
            }
        }

        function downloadCompressedFile() {
            const compressedCode = document.getElementById('compressedCode').value;
            if (!compressedCode) {
                alert('Please compress the code first.');
                return;
            }
            const blob = new Blob([compressedCode], { type: 'text/javascript' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'compressed.js';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>

创建public文件夹，将index.html文件放入public文件夹（ 因为：app.use(express.static(‘public’)); ）。
在这里插入图片描述

  • 部署到服务器。复制 jscompress文件夹到服务器上，进入jscompress目录，然后安装相关环境。
cd jscpmpress
npm init -y
npm install express terser
  • 安装完成后，运行服务：
node server.js

提示：Server running at http://localhost:3000（远程服务器上记得打开相应的端口）

  • 访问页面，我的页面如下图：
    在这里插入图片描述

  • 点击“选择文件”->点击“Compress”按钮，就能看到原始代码和压缩后的代码：
    在这里插入图片描述

  • 点击“Download Compressed File”按钮即可下载文件：
    在这里插入图片描述

  • 下载文件默认的名称是compressed.js我不是很满意，我继续和AI对话：
    在这里插入图片描述
    在这里插入图片描述

  • 修改后的index.html文件如下，下载文件的名称会在原始文件名的基础上加上后缀“.min”：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Code Compressor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
        }

        button {
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <h1>JS Code Compressor</h1>
    <input type="file" id="fileInput" accept=".js">
    <button onclick="compressFile()">Compress</button>
    <button onclick="downloadCompressedFile()">Download Compressed File</button>
    <h2>Original Code</h2>
    <textarea id="originalCode" readonly></textarea>
    <h2>Compressed Code</h2>
    <textarea id="compressedCode" readonly></textarea>

    <script>
        let originalCode = '';
        let fileName = '';

        document.getElementById('fileInput').addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                fileName = file.name.replace(/\.[^/.]+$/, ''); // Remove file extension
                const reader = new FileReader();
                reader.onload = function (e) {
                    originalCode = e.target.result;
                    document.getElementById('originalCode').value = originalCode;
                };
                reader.readAsText(file);
            }
        });

        async function compressFile() {
            if (!originalCode) {
                alert('Please upload a JS file first.');
                return;
            }
            try {
                const response = await fetch('/compress', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ code: originalCode })
                });
                const result = await response.json();
                if (result.error) {
                    alert('Error compressing code: ' + result.error);
                } else {
                    document.getElementById('compressedCode').value = result.compressedCode;
                }
            } catch (error) {
                alert('Error compressing code: ' + error.message);
            }
        }

        function downloadCompressedFile() {
            const compressedCode = document.getElementById('compressedCode').value;
            if (!compressedCode) {
                alert('Please compress the code first.');
                return;
            }
            const blob = new Blob([compressedCode], { type: 'text/javascript' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName + '.min.js'; // Use the original file name with .min.js extension
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>

</html>
  • 代码已经满足了压缩js代码的简单要求，我的“通义灵码”帮我搭建js在线压缩工具的过程就结束了。
总结

每个人使用的AI编程工具会不同，我没有特别推荐。使用工具过程中AI的返回结果可能不一样，和AI的沟通也要慢慢去磨合，体验AI编程，拥抱AI编程。

探索前端Vite的代码压缩与混淆技巧
AI架构全栈开发实战笔记
06-14 1707
压缩：通过删除冗余代码（如空格、注释）、简化表达式等方式，减小文件体积，提升页面加载速度；混淆：通过重命名变量/函数、打乱代码结构等手段，让代码难以被逆向解析，保护核心业务逻辑。本文将聚焦Vite（当前最流行的前端构建工具），详细讲解如何配置这两项功能，覆盖从基础原理到实战落地的全流程。用快递打包类比解释压缩混淆；Vite中压缩工具（terser/esbuild）的配置对比；混淆的高级技巧（如字符串加密、控制流扁平化）；实战案例：从0配置一个高保护级别的生产环境构建。压缩。
全栈开发的现状与未来——机遇与挑战并存
最新发布
Willin Wang 的全栈升级指南
07-11 1057
全栈开发依然充满机遇，市场需求旺盛，薪资水平可观，尤其是在掌握新兴技术（如AI、云计算）并具备解决复杂问题能力的开发者中。然而，行业竞争激烈，技术更新迭代快，对从业者的学习能力和综合技能提出了更高要求。通过持续学习、深耕特定领域、拥抱新兴技术并提升软实力，全栈开发者完全有能力在挑战与机遇并存的环境中保持竞争力，并实现多元化的职业发展。
JavaScript 在线压缩和格式化收藏
10-30
国外人写的在线压缩和格式化工具这两套程序都是用纯 JavaScript 写的，可以下载下来离线使用，很方便。
js在线压缩工具！
coolsooner
07-27 118
js占用太大，需要压缩，使用下面的工具！！！ http://www.51240.com/jsmin/
Javascript 在线压缩工具
步行者的专栏
12-11 543
http://www.zhangjingwei.com/jspacker/index.php
【亲测免费】 UglifyJS：在线JavaScript压缩工具
gitblog_00038的博客
06-24 562
UglifyJS：在线JavaScript压缩工具 项目介绍 UglifyJS 3 是一款优秀的 JavaScript 压缩工具，广泛应用于 jQuery 等大型库中。它能够有效地减小 JavaScript 文件的大小，从而提升网页加载速度。本项目是一个简单的浏览器端封装，使得用户可以直接在浏览器中使用 UglifyJS 进行代码压缩。如果你需要自动化解决方案，建议查看 UglifyJS 源代码，...
在线Javascript压缩工具
Linux,Java,SpringBoot,Python,Lua略知一点
03-30 2198
在线Javascript压缩工具 在线Javascript压缩工具 在线 Javascript Minifier 去除了间距、缩进、换行，使其缩小、压缩。它减少了文件大小，也使 javascript 更难阅读。 在线 Javascript Minifier 去除了间距、缩进、换行，使其缩小、压缩。它减少了文件大小，也使 javascript 更难阅读。 https://toolgg.com/javascript-minifier.html ...
快速搭建AI问答机器人：探索通义千问及国外模型应用
资源摘要信息:"《AI大模型应用》--轻量级 AI 对话网站，支持 国外大模型、通义千问等，几秒钟搭建属于自己的 AI 问答机器人！.zip" 本文档包含了多个知识点，主要围绕AI大模型在实际应用中的开发和部署过程，特别是...
AI大模型应用实践：通义千问与自然语言数据库交互指南
Vue.js是一个流行的前端JavaScript框架，适合构建交互式用户界面和单页应用程序。这个资源将帮助用户了解如何构建一个直观的用户界面，并通过前端代码与后端的自然语言处理服务进行通信。 NLPtoDataBase_Springboot...
AI星座匹配分析系统：智能配对、深度解读与即时反馈
1. 环境要求：JDK 1.8+、Maven 3.6+、Redis 6.0+和Node.js 16+，这些是搭建开发环境的基础要求。 2. 后端启动：需要配置application.yml文件，涉及到系统配置的个性化调整。 ### 压缩包子文件的文件名称列表 1. ...
第1章 Web前端开发概述-HTML5+CSS3 Web前端开发与实例教程（微课视频版）配套PPT
06-09
2. **人工智能辅助编程**：通过使用诸如通义灵码等人工智能工具，可以辅助开发者进行代码编写，提高开发效率。 - **示例**：智能生成代码片段、自动补全代码等。 #### 五、网站设计与开发流程 1. **需求分析**：...
js代码在线压缩、格式化的工具
03-25
js代码在线压缩、格式化的工具，是个一个Web网页，能格式化JS代码
js代码压缩
10-28
使用fis3对代码进行压缩使用fis3对代码进行压缩使用fis3对代码进行压缩使用fis3对代码进行压缩
最强大的免费可用！！的js混淆压缩本地工具(附赠一个反混淆工具)
06-24
之前找了很久的js混淆工具，很多都是付费的...经过漫漫寻找终于找到这个安装之后就可以使用的js混淆工具，作者来自国外..支持大的js文件混淆压缩处理. 为了方便大家，特意提供了一个反混淆工具供大家分析，学习使用. 【注】对于一些核心的js，不建议使用在线js混淆压缩服务，因为在线工具都有人服务日志等，可能会被泄露
实用网站——在线压缩js文件
qq_43201350的博客
11-11 1177
在线压缩js文件
js在线压缩和混淆
大人的技术博客
09-15 934
http://www.brainjar.com/js/crunch/demo.html 留作以后用 http://editor.lionsky.net/JSConfusionWebDemo/ 混淆 10年5月28号编辑更新一个地址 javascript压缩美化混淆 htt
JS 压缩
天生我材必有用，千金散尽还复来
08-13 435
http://www.csscool.cn/packer/Index.php   http://joliclic.free.fr/php/javascript-packer/en/index.php
js压缩
zhang52088的博客
12-29 626
压缩不仅仅可以提高用户的下载速度，同时还可以加密代码，下面说下一个常用的js压缩方法： 首先使用dojo的工具shrinksafe(http://shrinksafe.dojotoolkit.org/)压缩一下,dojo的这个 工具会去掉注释，他的压缩不是简单的替换变量，而是利用了mozilla的一个工具,对js解析后才压缩，确保压缩后的代码不会出错。 dojo压缩后，并不会减少太多，下一步可以使...
压缩js
BeginningYT的博客
08-22 698
推荐一个最近用的比较好的在线js压缩工具：http://tool.chinaz.com/js.aspx 注：压缩的没有原生的容错能力好，所以代码尽量写规范分号什么的都要写全。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值