使用uglifyjs压缩JS
一般vue项目完成打包以后需要优化,特别是首次打开加载速度们,webpack打包以后js文件体积很大等方法,可以用这个方法来压缩js文件
- 安装node.js
- 安装当前应用 -- uglifyjs
如何安装node.js就不再介绍了, 百度一下一大把.安装uglifyjs如下:
- uglifyjs压缩JS文件
======
演示如何使用uglifyjs压缩JS
打开一个用于存放JS文件的文件夹,文件目录如下图:
准备压缩lazyLoad.js做实验, 当前该文件的大小为10KB.我们来进行压缩,看看压缩后的文件大小是多少?
这里给大家介绍一个小技巧, 以方便快速地打开cmd, 并定位到当前目录.
点击"在此处打开命令窗口"后即可以进入到cmd, 你会发现已经切换到当前文件所在的路径了.
此时输入命令对lazyLoad.js文件进行压缩并输出文件名为lazyLoady.min.js的文件:
uglifyjs lazyLoad.js -o lazyLoad.min.js
也可以运行如下代码, 测试一下-m
参数:
uglifyjs lazyLoad.js -m -o lazyLoad.min.js
以看到, 压缩后只有3KB, 相比之前的, 文件缩小了3倍多.快去试下吧!
- 结束语
======
对于自己来说, 本文就相当于做笔记. 需要注意的是, uglifyjs只能压缩js文件(且只支持ECMAScript 5: ES5).
使用uglifyjs压缩JS的更多相关文章
- uglifyjs压缩JS的
一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基 ...
- uglifyjs压缩JS
一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基 ...
- 小tip:我是如何初体验uglifyjs压缩JS的
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2946 一.故事总有其 ...
- uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)
一.指令压缩 1.安装node,npm——详细见nodejs安装与使用入门 2.安装 uglifyjs——npm install -g uglify-js 3.压缩例子:1)uglifyjs mai ...
- 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地
Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...
- uglifyjs 压缩js
第一步 安装nodejs dos下执行 node -v npm -v
- uglifyjs压缩批处理
uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感. uglifyjs压缩批处理我们不可能每次都打开cm ...
- uglifyjs压缩批处理,.bat文件启动
我们不可能每次都打开cmd去键入压缩执行代码,容易写错不说(如上面那个结果图),还耗时,想想都会让人疯掉. 懒人有懒法,花了点功夫,折腾了一个批处理文件,以后,想要压缩JS,只要双击运行这个.bat文 ...
- npm压缩js文件
参考:https://blog.csdn.net/msy_msy/article/details/78261383 1.压缩单个js文件 cnpm install uglify-js -g 安装 1& ...
随机推荐
- [jQuery]文本框text变化事件
$("#key").live("keyup",function(){ })
- [SharePoint][SharePoint Designer 入门经典]Chapter12 高级工作流
1.使用Visio2010创建工作流标志 2.使用Visio Graphic服务可视化一个运行的工作流 3.使用InfoPath2010修饰工作流表单 4.导出可重用的工作流
- HBase使用flush命令之后存储的位置
HBase使用flush命令之后存储的位置 根据系统安装位置的不一样而不一样,当前是在: hadoop fs -ls /apps/hbase/data/data/default/t1 下面: 使用ha ...
- [Angular] Getting to Know the @Attribute Decorator in Angular
So when you using input binding in Angular, it will always check for update. If you want to improve ...
- MySQL List分区(三)
具体介绍请看 MySQL分区一 样例:该样例为本人个人学习总结分享
- Redis命令-HyperLogLog
HyperLogLog数据结构简单介绍 能够看http://www.cnblogs.com/ysuzhaixuefei/p/4052110.html 博客,介绍的相对照较清晰. HyperLogLo ...
- (转)IOS http请求的get 和 post的请求的区别
从表面的意思看get 和 post的区别get就是获取数据,post就是发送数据.这个是误区.其实两者都可以的,在IOS向服务器发送请求里面可以带参数. 那么这些误区是怎么出现的呢?先看看一下对htt ...
- Android Fragment RecycleListView
1.新建SuperActivity package com.example.ting.criminalintentpractise; import android.os.Bundle;import a ...
- Swagger 隐藏具体API
一.why 在swagger ui界面中有时候不想显示某些api,通过下面的方式可以实现. 1.1.新建一个类实现IDocumentFilter接口 using Swashbuckle.Swagger ...
- shopping car 3.0
#!/usr/bin/env python# -*- coding: utf-8 -*-# @File : 购物车3.0.py# @Author: Anthony.waa# @Date : 2018/ ...