分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

js 压缩

发布时间:2023-09-06 02:11责任编辑:傅花花关键词:js

  听到同事说没找到压缩js文件的,说软件压缩貌似有点问题,我自己就用nodejs练手般写了压缩文件的。

  主要的思路就是,先通过前端上传js文件,然后服务器接收,然后引用uglifyjs 压缩,再返回文件路径给前端下载即可。代码如下:

  html:

  <div> ???????<div class="content"> ???????????<span>js压缩工具</span> ???????????<form ?id="uploadFiles" enctype="multipart/form-data"> ????????????????<input type="file" id=‘uglifyJs‘ multiple="multiple" name="js_min"> ???????????????<input type="hidden" name="test" value="heyden"> ???????????</form> ???????????<button id="upload">压缩</button> ???????</div> ???</div>

  js 脚本    

$(function() { ???var baseUrl = location.hostname ???$("#upload").click(function() { ???????$.ajax({ ???????????url:`http://${baseUrl}:8084/upload`, ???????????type:‘POST‘, ???????????data: new FormData($(‘#uploadFiles‘)[0]), ???????????processData:false, ???????????contentType:false, ???????????success: function(res) { ???????????????res.fileData.forEach(item => { ???????????????????let elDown = document.createElement(‘a‘), ???????????????????????e = document.createEvent("MouseEvents"); //创建鼠标事件对象 ???????????????????e.initEvent("click", false, false); //初始化事件对象 ???????????????????elDown.href = item.downUrl ???????????????????elDown.download = item.fileName; ???????????????????elDown.dispatchEvent(e); //给指定的元素,执行事件click事件 ???????????????}); ???????????}, ???????????error: function() { ???????????} ???????}) ???})})

  这里ajax请求时。processData,contentType这两个记得填,否则会被坑

nodejs :

const express = ?require(‘express‘);const ?app = express()const formidable = require(‘formidable‘);const fs = require(‘fs‘)const path = require(‘path‘)const UglifyJS = require(‘uglify-js‘)const multiparty = require(‘multiparty‘);let ?form = nullapp.use(express.static(‘static‘))app.get(‘/‘, function(req, res) { ???res.sendfile(‘index.html‘)})app.post(‘/upload‘, function(req, res) { ???form = new multiparty.Form(); ???form.uploadDir = ‘static/tmp‘ ???form.maxFieldsSize = 1 * 1024 * 1024; ???var targetDir = path.join(__dirname, ‘/static/upload‘) ????fs.access(targetDir, function (err) { ???????if (err) { ???????????fs.mkdir(targetDir); ???????} ???????_fileSave(req, res, targetDir) ???})})app.listen(8084, "0.0.0.0" ,() => { ???console.log(‘succcess in port 8084‘); ???})function _fileSave(req, res, target) { ???form.parse(req, function (err, fields, files) { ???????if (err) throw err ???????var fileData = []; ???????var errCount = 0; ???????var keys = files.js_min ???????var miniJs = [] ???????keys.forEach(function(key, index) { ???????????var filePath = key.path; ???????????var fileExt = filePath.substring(filePath.lastIndexOf(‘.‘)); ???????????if ((‘.js.txt‘).indexOf(fileExt.toLowerCase()) === -1) { ???????????????errCount += 1; ???????????} else { ???????????????var fileName = fileExt; ???????????????var targetFile = target + ‘/‘ + key.originalFilename ; ???????????????var fileUrl = req.originalUrl +"/"+ key.originalFilename ???????????????//移动文件 ???????????????miniJs.push(UglifyJS.minify(fs.readFileSync(filePath, ‘utf8‘))) ???????????????fs.writeFileSync(targetFile, miniJs[index].code, "utf8") ???????????????fs.unlinkSync(filePath); ???????????????// 文件的Url(相对路径) ???????????????fileData.push({ target: targetFile, downUrl: fileUrl, fileName: key.originalFilename}) ???????????} ???????}) ???????????????res.json({ fileData: fileData, success: keys.length - errCount, error: errCount, result: miniJs}); ???})}

  写服务时,接收前端的文件时,调接口时,form 对象记得调一次就new一个,否则会报错。,,获取前端文件后,只需用UglifyJS处理,然后重命名临时文件即可,最后返回

文件url给前端,让前端自己下载。这里我也不知道怎么直接让前端自动下载,貌似通过请求不好下载,自己也没找到方法,求靠前端js解决咯

js 压缩

原文地址:https://www.cnblogs.com/ylHeyden/p/9531940.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved