cssjs壓縮工具

『壹』 怎麼使用yuicompressor2.4.2.jar進行js，CSS進行代碼混淆

目前開發Web應用javascript發揮的作用越來越大，相關的Javascript框架也比較多。但是有一個問題，我們開發過程中，所有的JS代碼都添加了注釋，如使用JsDoc，代碼的可讀性比較強，同時這樣的代碼也便於調試。但是在產品環境中，我們希望這些JS代碼是壓縮和混淆過的，這主要是讓 JS代碼載入的更快，這也是Google AJAX Libraries API出現的原因。YUI Compressor 是一款由 Yahoo 公司開發的、功能非常強大的 JS、CSS 代碼混淆和壓縮工具，採用Java開發，目前很多Javascript Framework都使用YUI Compressor進行代碼分發。

二、使用簡介：

在命令行下執行 Java 程序，運行 yuicompressor jar 軟體包，來完成任務：

//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js

//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

三、參考官方英文注釋：

3.1 How does the YUI Compressor work?

The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement) The CSS compression algorithm uses a set of finely tuned regular expressions to compress the source CSS file. The YUI Compressor is open-source, so don't hesitate to look at the code to understand exactly how it works.

3.2 Using the YUI Compressor from the command line

java -jar yuicompressor-x.y.z.jar

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options
-h, --help Displays this information
--type <js|css> Specifies the type of the input file
--charset <charset> Read the input file using <charset>
--line-break <column> Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o <file> Place the output into <file>. Defaults to stdout.

JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations

GLOBAL OPTIONS

-h, --help
Prints help on how to use the YUI Compressor

--line-break
Some source control tools don't like files containing lines longer than,
say 8000 characters. The linebreak option is used in that case to split
long lines after a specific column. It can also be used to make the code
more readable, easier to debug (especially with the MS Script Debugger)
Specify 0 to get a line break after each semi-colon in JavaScript, and
after each rule in CSS.

--type js|css
The type of compressor (JavaScript or CSS) is chosen based on the
extension of the input file name (.js or .css) This option is required
if no input file has been specified. Otherwise, this option is only
required if the input file extension is neither 'js' nor 'css'.

--charset character-set
If a supported character set is specified, the YUI Compressor will use it
to read the input file. Otherwise, it will assume that the platform's
default character set is being used. The output file is encoded using
the same character set. IMPORTANT: if you do not supply this argument
and the file encoding is not compatible with the system's default
encoding, the compressor will throw an error. In particular, if your
file is encoded in utf-8, you should include this parameter.

-o outfile
Place output in file outfile. If not specified, the YUI Compressor will
default to the standard output, which you can redirect to a file.

-v, --verbose
Display informational messages and warnings.

JAVASCRIPT ONLY OPTIONS

--nomunge
Minify only. Do not obfuscate local symbols.

--preserve-semi
Preserve unnecessary semicolons (such as right before a '}') This option
is useful when compressed code has to be run through JSLint (which is the
case of YUI for example)

--disable-optimizations
Disable all the built-in micro optimizations.Note: If no input file is specified, it defaults to stdin.

The following command line (x.y.z represents the version number):

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.jswill minify the file myfile.js and output the file myfile-min.js. For more information on how to use the YUI Compressor, please refer to the documentation included in the archive.

The charset parameter isn't always required, but the compressor may throw an error if the file's encoding is incompatible with the system's default encoding. In particular, if your file is encoded in utf-8, you should supply the parameter.

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

四、YUI Compressor 壓縮 JavaScript 的原理

YUI Compressor 壓縮 JavaScript 的內容包括：

1.移除注釋
2.移除額外的空格
3.細微優化
4.標識符替換（Identifier Replacement）

YUI Compressor 包括哪些細微優化呢？

• object["property"]，如果屬性名是合法的 JavaScript 標識符（註：合法的 JavaScript 標識符——由一個字母開頭，其後選擇性地加上一個或者多個字母、數字或下劃線）且不是保留字，將優化為： object.property
• {"property":123}，如果屬性名是合法的 JavaScript 標識符且不是保留字，將優化為 {property:123} （註：在對象字面量中，如果屬性名是一個合法的 JavaScript 標識符且不是保留字，並不強制要求用引號引住屬性名）。
• 'abcd/'efgh'，將優化為 "abcd'efgh"。
• "abcd" + "efgh"，如果是字元串相連接，將優化成 "abcdefgh"（註：所有在使用 YUI Compressor 的前提下，對於腳本中的字元串連接，使用連接符 「+」 的效率和可維護性最高）。
對於 JavaScript 最有效的壓縮優化，當屬標識符替換。

比如：

(function(){function add(num1, num2) {return num1 + num2;}})();

進行屬標識符替換後：

(function(){function A(C, B) {return C+ B;}})();

再移除額外的空格，最終成了：

(function(){function A(C,B){return C+B;}})();

YUI Compressor 標識符替換僅替換函數名和變數名，那哪些不能被替代呢？

1.原始值：字元串、布爾值、數字、null 和 undefined。一般來說字元串占的空間最多，而非數字字面量其次（true、false，null，underfinded）。
2.全局變數：window、document、XMLHttpRequest等等。使用最多的就是 document、window。
3.屬性名，比如：foo.bar。占據的空間僅次於字元串，」.」 操作符無法被代替，且 a.b.c 更加費空間。
4.關鍵字。經常被過度使用的關鍵字有：var、return。最好的優化方法：一個函數僅出現一次 var 和 return 關鍵字。
對於原始值、全局變數、屬性名的優化處理方式大致相同：任何字面量值、全局變數或者屬性名被使用超過 2 次（包括2次），都應該用局部變數存儲代替。

但有部分情況下是禁止使用標識符替換的：

1.使用 eval() 函數。解決方法：不使用或者創建一個全局函數封裝 eval()。
2.使用 with 語句。解決方法：方法同上。
3.JScript 的條件注釋。唯一解決的方法：不使用。
由於 YUI Compressor 是建立在 rhino interpreter 基礎上的，所以上述所有的優化都是安全的。

『貳』 如何壓縮網站里的css 和js文件 來減少空間的使用率，是網站打開速度加快

你好，個人建議從幾個方面入手：
1、在伺服器上啟用GZIP壓縮，添加css等靜態文件等。
2、把主頁、內容頁的CSS分開寫，公共部分單獨用一個CSS，這樣就可以減少CSS的大小。
3、優化CSS語法，並可以使用工具壓縮，但要注意用多個瀏覽器測試。
4、將一些JS調用盡量放到網頁底部

『叄』 插件 mini-css-extract-plugin 使用的詳解（二）

文接上回，繼續看 webpack 的插件：這里默認你已經搭建出來一個 React 框架。我就是在這個基礎上演示的。

mini-css-extract-plugin作用： 該插件的主要是為了抽離 css 樣式,防止將樣式打包在 js 中文件過大和因為文件大網路請求超時的情況。
extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身，不過前者在 webpack4 算是廢了。

安裝依賴：

然後引入，配置提出 css 樣式，重命名 css 文件。

其中上面的 rules 還可以修改變成這樣：

打包出來的 index.css將會插入 index.html 裡面的 head 標簽裡面。

現在如果使用下面的樣式：

其中 transform: rotate(45deg); 是 css3 的樣式。我們想批量給它增加前綴。這時就得使用 autoprefixer 。但是還的用一個 loader 來處理，這個 loader 就叫 postcss-loader 。

安裝依賴：

配置時 postcss-loader 執行順序必須保證在 css-loader 之前。

完成之後 在webpack.config.js 同級目錄下新建 post.config.js 輸入內如下：

打包之前的 css 樣式為：

經過插件處理之後為：

如果你不想新建一個 post.config.js 文件的話可以這樣配置：

處理的效果是完全和分開寫一樣的。

這里需要注意的是在 HtmlWebpackPlugin 插件裡面的配置壓縮 css 參數只對自己創建的模板有效，所以這里引包的 css 並沒有壓縮。我們還的專門配置 壓縮 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是對打包的 JS 進行壓縮的。

安裝依賴：

注意： 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的時候 webpack 的 mode （模式）一定的是 生產模式（proction） 。

簡單配置就能壓縮 css 和 JS 了。還是很有用的，壓縮完成明顯文件變小了。
友情提示：