使用Google Closure Compiler进行Js代码压缩

young.li 发布于2019-08-23 11:54 / 1156人阅读

摘要：是什么是一个使下载和运行更快的工具。它解析您的，分析它，删除死代码并重写并最小化剩下的内容。它还检查语法，变量引用和类型，并警告常见的陷阱。其他参数这里使用默认运行后就可以看到生成了压缩的文件了。其他的代码压缩工具

1.Google Closure Compiler是什么？

The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what"s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Closure Compiler是一个使JavaScript下载和运行更快的工具。它不是从源语言编译到机器代码，而是从JavaScript编译成更好的JavaScript。它解析您的JavaScript，分析它，删除死代码并重写并最小化剩下的内容。它还检查语法，变量引用和类型，并警告常见的JavaScript陷阱。

2.使用环境

平台：Mac OS / Windows

环境：Java

3.检查是否安装了Java环境

打开终端，输入 java -version,输出java的版本说明已安装好了java，若报错，请安装java环境

4.Closure Compiler下载

在Github上下载最新版的编译好的Compiler文件，解压出jar文件存放在项目外的目录下：

5.在终端中，输入命令，运行jar：

java -jar /Users/wangjun/Git/compiler.jar --js_output_file=code.js "/Users/wangjun/Git/WorkProject/BallsRace/release/wxgame/code.js"

/Users/wangjun/Git/compiler.jar 改为自己的电脑上compiler.jar的路径，code.js改为输出文件名，/Users/wangjun/Git/WorkProject/BallsRace/release/wxgame/code.js改为输出路径。（其他参数这里使用默认）
运行后就可以看到生成了压缩的JS文件了。
压缩前后文件大小对比，压缩效果还是很明显的：

6.使用sh脚本实现自动化打包压缩Js文件

由于我是使用Laya Box引擎做游戏开发的，每次打包都需要手动敲代码进行代码压缩，并且还需要手动删除打包后多余的库文件，流程实在很繁琐，所以我使用了Laya打包提供的后续执行命令功能，配合sh命令进行了打包压缩的自动化，大大提高了打包效率。
打开Laya Box的打包页面

编写sh命令：

cd /Users/wangjun/Git/WorkProject/BallsRace/release/wxgame/
rm -rf ./libs
rm -rf ./res
java -jar /Users/wangjun/Git/compiler.jar --js_output_file=code.js "/Users/wangjun/Git/WorkProject/BallsRace/release/wxgame/code.js"

保存为.sh文件
在后续执行脚本中填入.sh脚本的路径，在打包后就可以自动执行代码压缩，并且删除多余文件了。

7.帮助

在终端中输入 java -jar compiler.jar --help 可以查看compiler的命令帮助和其他参数

8.其他

我没用使用各种在线的Js代码压缩网站，原因如下：

在线压缩工具受网络状况影响；

和我的需求不一致，我需要的是压缩js文件，而不只是压缩js代码片段；

无法实现自动化脚本，上传-等待-压缩-下载，比较繁琐；

我觉得上传代码压缩并不安全，有泄漏源码的风险。

9.其他的JavaScript代码压缩工具

UglifyJS

YUI Compressor

Smaller

Minifier

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97647.html

前端优化：RequireJS Optimizer 的使用和配置方法

摘要：是自带的前端优化工具，可以对项目中的和代码使用或者进行压缩合并。这篇文章介绍的使用和配置方法，帮助大家解决使用中碰到的问题。对脚本的优化支持目前流行的和两种压缩方式，需要环境支持，而则需要环境。定义要被优化的模块数组。 RequireJS Optimizer 是 RequireJS 自带的前端优化工具，可以对 RequireJS 项目中的JavaScript和CSS 代码使用 Ugli...

Alan 2019-08-28 17:51 评论0 收藏0
JavaScript新鲜事·第6期

摘要：微软公布版本在月日，微软公布了版本，增加了一些特性，已经离正式版不远了，目测功能应该不会再有太大的变化。由开发的一个日期选择组件，轻松选择开始时间和结束时间。项目地址发布版本，一个基于的。微软公布TypeScript 2.0 RC版本在8月30日，微软公布了TypeScript 2.0 RC版本，增加了一些特性，已经离正式版不远了，目测功能应该不会再有太大的变化。原文地址：http...

anRui 2019-08-20 10:46 评论0 收藏0
45个必备的JavaScript Web开发工具

摘要：幸运的是，为了完成独特的任务，无以计数的工具已经被开发者发布。图像显示的是一个针对该框架的在线开发工具。是用创建的命令行工具，用于压缩文件。是一组处理所有跟文件相关的工作的组件库。是一个基于任务的命令行项目构建工具。 JavaScript是一种灵活多变的脚本语言，它在全世界被广泛的应用在Web页面和服务器应用中。你可以因为任何目的去使用它，但是你需要一些工具。幸运的是，为了完成独特的任...

不知名网友 2019-08-21 10:31 评论0 收藏0
细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息

摘要：文件就是记录了从源代码文件到压缩文件的一个代码对应关系记录表，通过压缩文件和文件可以原原本本找出源代码文件。细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息 1. js 压缩 js 压缩对前端开发者来说是一门必修课。一般来说，压缩 js 主要出于以下两个目的：减小代码体积，加快前端资源加载速度保护源代码不被别人获取压缩 js 使用的工具库：...

douzifly 2019-08-23 13:07 评论0 收藏0
JavaScript Source Map 简介

摘要：为了提高性能，通常需要通过压缩和合并之后才能投入生产环境。多方便使用生成使用家的格式格式简单明了是的版本，是生成的文件，是原始代码所在的目录，留空表示同一目录。是原始代码，是转换前的所有变量名和属性名。其中，是默认开启的。为了提高性能，JavaScript通常需要通过压缩和合并之后才能投入生产环境。如果使用CoffeeScript，还需要进行编译。这就意味着，编辑的代码和运行的代...

libxd 2019-08-19 14:27 评论0 收藏0