热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

compress.js的简单介绍

本文目录一览:1、压缩的JS文件怎么修改呢2、

本文目录一览:


  • 1、压缩的JS文件怎么修改呢


  • 2、轻松压缩JS文件


  • 3、node.js 基础操作


  • 4、如何压缩js

压缩的JS文件怎么修改呢

1.

一般js压缩的,都有未压缩的文件,直接可以改未压缩的文件,到时引入的时候,也改成那个未压缩的js文件

2.

如果找不到未压缩的js文件,那就只能想办法把js压缩的文件格式化,改起来才方便,毕竟压缩过的就几行代码,不格式话下,估计都找不对位置

轻松压缩JS文件

在任意文件夹下按住shift按键的同时,点击鼠标右键

打开powershell命令窗口

执行命令: npm install uglify-js -g

首先,打开cmd

其次,查找要压缩的js文件,查找方法如下:

1、输入文件所在位置

例如,我需要压缩的文件在E盘中,就输入  e:

2、输入:cd + js文件所在位置

例如,我需要压缩的js文件在:E:\electron-vue\topology\static\new_node_modules\topology-vue

就执行:cd electron-vue\topology\static\new_node_modules\topology-vue

3、输入:uglifyjs + 要压缩的js文件名称 +  -o +  压缩后js文件名称

例如,我要将topology-vue.umd.js文件压缩成topology-vue.umd.min.js

就执行:uglifyjs topology-vue.umd.js -o topology-vue.umd.min.js

你没看错!

就是这么简单!!

将JS文件进行压缩,让你的程序快马加鞭地跑起来吧!!!

node.js 基础操作

require 函数用来在一个模块中引入另外一个模块。传入一个模块名,返回一个模块导出对象。用法: let cc = require("模块名") ,其中模块名可以用绝对路径也可以用相对路径,模块的后缀名.js可以省略。例如:

require()函数用两个作用:

exports 对象用来导出当前模块的公共方法或属性,别的模块通过 require 函数使用当前模块时得到的就是当前模块的 exports 对象。用法: exports.name ,name为导出的对象名。例子:

module.exports 用来导出一个默认对象,没有指定对象名,常见于修改模块的原始导出对象。比如原本模块导出的是一个对象,我们可以通过module.exports修改为导出一个函数。如下:

3.加载第三方包

Node.js中使用 CommonJs 模块化机制,通过 npm 下载的第三方包,我们在项目中引入第三方包都是: let xx = require('第三方包名') ,究竟 require 方法加载第三方包的原理机制是什么,今天我们来探讨下。

require('第三方包名') 优先在加载该包的模块的同级目录 node_modules 中查找第三方包。

找到该第三方包中的 package.json 文件,并且找到里面的 main 属性对应的入口模块,该入口模块即为加载的第三方模块。

如果在要加载的第三方包中没有找到 package.json 文件或者是 package.json 文件中没有 main 属性,则默认加载第三方包中的 index.js 文件。

如果在加载第三方模块的文件的同级目录没有找到 node_modules 文件夹,或者以上所有情况都没有找到,则会向上一级父级目录下查找 node_modules 文件夹,查找规则如上一致。

如果一直找到该模块的磁盘根路径都没有找到,则会报错: can not find module xxx 。

4.npm命令

npm 英文全称: node package manager ,npm 为你和你的团队打开了连接整个 Javascript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。我们平时开发项目都是需要使用npm下载依赖,常见的npm命令总结如下:

5.文件读取

var fs = require('fs')

同步:

var cOntent= fs.readFileSync('hello.txt',{flag:'r',encoding:"utf-8"})

异步(默认):

flag:读取模式

encoding:编码格式

7.文件写入

var fs = require('fs')

格式:write=w read=r append =a

异步:

8.文件删除

fs . unlink ( 'lc.txt' , function (){

9.buffer缓冲区

1、数组不能进行二进制数据的操作2、js数组不像java、python等语言效率高3、buffer内存空间开辟出固定大小的内存

let buf1 = Buffer.alloc(10)

console.log(buf1)

allocUnsafe(之前的一些内容)(效率高)

10.文件目录

var fs = require('fs')

fs.readdir(path,callback)

导入 readline 包

let readline = require('readline');

实例化接口对象(process对象,stdout/in输入输出)

question方法 提问

close 事件监听

11.文件流

var fs = require('fs')

语法: fs.createWriteStream(文件路径,【可选的配置操作】)

let ws = fs.createWriteStream("hello.txt",{flags:"w",encoding:"utf-8"});

let ws = fs.createWriteStream("hello.txt",{flags:"w",encoding:"utf-8"});

实践

fs.createReadStream(路径,【可选的配置项】)

文档

let rs = fs.createReadStream('hello.txt',{flags:'r',encoding:"utf-8"})

音乐

let rs = fs.createReadStream('snake.mp4',{flags:'r'})

读取时写入

let ws = fs.createWriteStream('a.txt',{flags:"w",encoding:"utf-8"})

createReadStream.pipe(createWriteStream)

链式是通过连接输出流到另外一个流并创建多个流操作链的机制。链式流一般用于管道操作。

接下来我们就是用管道和链式来压缩和解压文件。

创建 compress.js 文件, 代码如下:

代码执行结果如下:

执行完以上操作后,我们可以看到当前目录下生成了 input.txt 的压缩文件 input.txt.gz。

接下来,让我们来解压该文件,创建 decompress.js 文件,代码如下:

12.node事件

Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高。

Node.js 几乎每一个 API 都是支持回调函数的。

Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。

Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数.

没有使用 events 包 仅使用Javascript事件监听进行事件驱动

Node.js 使用事件驱动模型,当web server接收到请求,就把它关闭然后进行处理,然后去服务下一个web请求。

当这个请求完成,它被放回处理队列,当到达队列开头,这个结果被返回给用户。

这个模型非常高效可扩展性非常强,因为 webserver 一直接受请求而不等待任何读写操作。(这也称之为非阻塞式IO或者事件驱动IO)

在事件驱动模型中,会生成一个主循环来监听事件,当检测到事件时触发回调函数。

Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件,如下实例:

以下程序绑定事件处理程序:

我们可以通过程序触发事件:

接下来让我们执行以上代码:

在 Node 应用程序中,执行异步操作的函数将回调函数作为最后一个参数, 回调函数接收错误对象作为第一个参数。

接下来让我们来重新看下前面的实例,创建一个 input.txt ,文件内容如下:

创建 main.js 文件,代码如下:

以上程序中 fs.readFile() 是异步函数用于读取文件。如果在读取文件过程中发生错误,错误 err 对象就会输出错误信息。

如果没发生错误,readFile 跳过 err 对象的输出,文件内容就通过回调函数输出。

执行以上代码,执行结果如下:

接下来我们删除 input.txt 文件,执行结果如下所示:

因为文件 input.txt 不存在,所以输出了错误信息。

Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列。

Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在每次有新连接时触发一个事件, 一个 fs.readStream 对象会在文件被打开的时候触发一个事件。所有这些产生事件的对象都是 events.EventEmitter 的实例。

events 模块只提供了一个对象:events.EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。

你可以通过require("events");来访问该模块。

EventEmitter 对象如果在实例化时发生错误,会触发 error 事件。当添加新的监听器时,newListener 事件会触发,当监听器被移除时,removeListener 事件被触发。

下面我们用一个简单的例子说明 EventEmitter 的用法:

执行结果如下:

运行这段代码,1 秒后控制台输出了 'some_event 事件触发' 。其原理是 event 对象注册了事件 some_event 的一个监听器,然后我们通过 setTimeout 在 1000 毫秒以后向 event 对象发送事件 some_event,此时会调用some_event 的监听器。

EventEmitter 的每个事件由一个事件名和若干个参数组成,事件名是一个字符串,通常表达一定的语义。对于每个事件,EventEmitter 支持 若干个事件监听器。

当事件触发时,注册到这个事件的事件监听器被依次调用,事件参数作为回调函数参数传递。

让我们以下面的例子解释这个过程:

执行以上代码,运行的结果如下:

以上例子中,emitter 为事件 someEvent 注册了两个事件监听器,然后触发了 someEvent 事件。

运行结果中可以看到两个事件监听器回调函数被先后调用。这就是EventEmitter最简单的用法。

EventEmitter 提供了多个属性,如 on 和 emit 。 on 函数用于绑定事件函数, emit 属性用于触发一个事件。接下来我们来具体看下 EventEmitter 的属性介绍。

如何压缩js

简单的压缩一般是:删除注释和空白符,替换变量名。

更激进点的做法还包括:删除无用代码,内联函数,等价语句替换等。

有些开发者出于保护代码的原因,还可能会对代码进行混淆处理。

通常深度压缩JS都必须要做的一步就是尽量地缩短变量名,因为一份体积巨大的JS代码,其中的变量名会占去不少空间。

压缩js必须要注意:

1、压缩前的代码格式要标准。因为去掉换行与空格时,所有语句就变成一行,如果你的代码有瑕疵(比如某行少了个分号),那就会导致整个文件报错。当然,现在有的压缩工具已经比较智能了。

2、备份原文件。压缩很可能不会一次成功,一般要多试,多改。

js压缩工具:

1. YUI Compressor

2. Google Closure Compiler


推荐阅读
  • 在Linux系统中,许多应用程序以源代码的形式提供,这给安装带来了挑战。本文旨在介绍一种简化源码软件安装流程的方法,帮助用户更加轻松地完成安装。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom"echarts";4、如果用到map(地图),还 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • 深入体验Python的高级交互式Shell - IPython
    IPython 是一个增强型的 Python 交互式 Shell,提供了比标准 Python 控制台更为强大的功能,适用于开发和调试过程。它不仅支持直接执行 Linux 命令,还提供了丰富的特性来提高编程效率。 ... [详细]
  • Android与JUnit集成测试实践
    本文探讨了如何在Android项目中集成JUnit进行单元测试,并详细介绍了修改AndroidManifest.xml文件以支持测试的方法。 ... [详细]
  • 【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库
    【小白学习C++ 教程】二十三、如何安装和使用 C++ 标准库 ... [详细]
  • 在Java开发中,保护代码安全是一个重要的课题。由于Java字节码容易被反编译,因此使用代码混淆工具如ProGuard变得尤为重要。本文将详细介绍如何使用ProGuard进行代码混淆,以及其基本原理和常见问题。 ... [详细]
  • NPM 脚本 'start' 退出,未显示 create-react-app 服务器正在监听请求
    遇到 NPM 脚本 'start' 退出且未显示 create-react-app 服务器正在监听请求的问题,请求帮助。 ... [详细]
  • 在开发板的启动选项中看到如下两行:7:LoadBootLoadercodethenwritetoFlashviaSerial.9:LoadBootLoadercodethenwri ... [详细]
  • 单元测试:使用mocha和should.js搭建nodejs的单元测试
    2019独角兽企业重金招聘Python工程师标准BDD测试利器:mochashould.js众所周知对于任何一个项目来说,做好单元测试都是必不可少 ... [详细]
  • 本文将详细介绍如何在Webpack项目中安装和使用ECharts,包括全量引入和按需引入的方法,并提供一个柱状图的示例。 ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
author-avatar
笑点已阵亡
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有