壓縮js代碼
① 如何壓縮網站里的css 和js文件 來減少空間的使用率,是網站打開速度加快
你好,個人建議從幾個方面入手:
1、在伺服器上啟用GZIP壓縮,添加css等靜態文件等。
2、把主頁、內容頁的CSS分開寫,公共部分單獨用一個CSS,這樣就可以減少CSS的大小。
3、優化CSS語法,並可以使用工具壓縮,但要注意用多個瀏覽器測試。
4、將一些JS調用盡量放到網頁底部
② 求助前端JS都是用什麼加密的
js的不可讀化處理分為三個方面:壓縮(compression)、混淆(obfuscation) 和加密(encryption)。
1. 壓縮
這一操作的目的,是讓最終代碼傳輸量 (不代表代碼量, 也不代表文件體積)盡可能小。壓縮js的工具,常見的有:YUI Compressor、UglifyJS、Google Closure Compiler 等。
通常在代碼壓縮的過程中,只改變代碼的語法,代碼的語義和控制流不會有太大改變。
常見做法是把局部變數縮短化,把一些運算進行等價替換等。代碼壓縮對於代碼保護有一些幫助,但由於語義和控制流基本沒變,起不了太大作用。
在壓縮層面上,代碼不可讀只是一種附帶傷害,不是最終目的。
2. 混淆
這一操作的目的,是讓代碼盡可能地不可讀,主要用作代碼保護。
讓代碼不可讀,增加分析的難度,這是唯一目的。混淆過後文件體積變大一倍也沒關系,代碼量變多也沒關系,運算慢50% 也沒關系。
常見的做法有:分離常量、打亂控制流、增加無義代碼、檢查運行環境如果不對就罷工,等等。
在混淆層面上,代碼不可讀是最終目的。
值得一提的是,Google Closure Compiler 的 Advance Level Compression 會壓縮類和對象的成員,其壓縮結果很難分析,也可以認為是一種混淆,但兼容性不太好。
3. 加密
有加密就有解密,意味著加密操作可逆,密文可以明文化。
在Web界,可以稱之為加密的東西包括:HTTPS傳輸、javaScript實現對稱加密或者不對稱加密等等。
③ YUICompressor使用配置方法JSCSS壓縮工具
YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具,採用Java開發。
使用方法:
//壓縮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
YUI Compressor v2.4.2
安裝指南
=========
JDK環境變數配置的步驟如下:
1.我的電腦-->屬性-->高級-->環境變數.
2.配置用戶變數:
a.新建 JAVA_HOME
C:Program FilesJavaj2sdk1.5.0 (JDK的安裝路徑)
b.新建 PATH
;%JAVA_HOME%in;%JAVA_HOME%jrein
c.新建 CLASSPATH
%JAVA_HOME%lib;%JAVA_HOME%lib ools.jar
3.測試環境變數配置是否成功:
開始-->運行--〉CMD
鍵盤敲入: JAVAC
出現相應的命令,而不是出錯信息,即表示配置成功!
先下載jdk
需要安裝 JDK >= 1.4, 並設置環境變數 JAVA_HOME
桌面 -> 我的電腦 -> 右鍵 -> 屬性 -> 高級 -> 環境變數系統變數 新建
安裝步驟:
1. 安裝請點擊 install.cmd
2. 卸載請點擊 uninstall.cmd
3. 如果安裝過之前的版本,請先卸載老版本
壓縮測試:
選中 test.js, 執行右鍵菜單「Process with &YUICompressor」,會生成 test-min.js.
注意事項:
1. 需要安裝 JDK >= 1.4, 並設置環境變數 JAVA_HOME
2. css 和 js 文件編碼必須是 GB2312, GBK 或 GB18030. 如果要支持 UTF-8, 請在 compressor.cmd 中將 GB18030 替換為 UTF-8
3. css 文件中含有中文時,如果 css 編碼和頁面編碼不一致,需要手動將中文替換為xxxx, 詳細說明請參考 compressor.cmd 中的說明
4. 如果不需要 native2ascii, 可以只安裝 JRE (需要手動修改下 compressor.cmd)
Ref:
1. Introcing the YUI Compressor: http://www.julienlecomte.net/blog/2007/08/11/
2. YUILibrary: http://yuilibrary.com/projects/yuicompressor/wiki
3. Documentation: http://developer.yahoo.com/yui/compressor/
4. native2ascii.exe: http://java.sun.com/j2se/1.4.2/docs/tooldocs/windows/native2ascii.html
以下是配置補充:
使用YUI Compressor壓縮JS和Css
常用示例(在cmd中執行)
java -jar D:yuicompressor-2.4.6uildyuicompressor-2.4.6.jar --type js --charset UTF-8 D:my.js -o D:my-min.js
java -jar D:yuicompressor-2.4.6uildyuicompressor-2.4.6.jar --type css --charset UTF-8 D:my.css -o D:my-min.css
–type指定要打包的文件類型,可選的有 js和css
–charset 指定字元集
-o 指定輸出的文件名,如果不指定這個參數將會把壓縮後的內容輸出到命令行上
最後的my.js和my.css是要打包的debug版源文件
如果沒有給定charset參數,則字元集默認是系統的,此處指定了UTF-8,更加你的實際需要修改。具體語法和其他參數參考:http://www.julienlecomte.net/yuicompressor/
使用YUI Compressor和DOS批處理腳本壓縮JavaScript和CSS,加上IIS的GZIP,加起來能得到85%左右的壓縮率。(其中YUI Compressor的壓縮率大約為50%)也可以修改參數獲得更多的壓縮率。
---------------------------------------------華麗分割線---------------------------------------
製作批處理工具
三個文件:
批處理文件:yuicompressor.bat
注冊表文件:yuicompressor.reg
壓縮jar包:yuicompressor-2.4.6.jar
文件目錄:D:serverf2etoolsyuicompressor
yuicompressor.bat批處理使用方法:
對整個文件夾右鍵點擊【YUI-Compressor JS/CSS】批量壓縮操作生成-min.css或-min.js,源文件不變,項目平時開發時引用源文件,上線前引用壓縮文件測試正常後再上線。
yuicompressor.bat批處理文件代碼:
復制代碼代碼如下:
cd "%1"
for /f %%a in ('dir /b *-min.js') do call:ProcessDel: %%a
for /f %%a in ('dir /b *-min.css') do call:ProcessDel: %%a
for /f %%a in ('dir /b *.js') do call:ProcessCompress: %%a
for /f %%a in ('dir /b *.css') do call:ProcessCompress: %%a
:ProcessDel
IF NOT [%1]==[] call:DeleteMinFiles: %1
GOTO:EOF
:ProcessCompress
IF NOT [%1]==[] call:CompressFiles: %1
GOTO:EOF
:DeleteMinFiles
IF EXIST "%CD%\%1" del "%CD%\%1"
GOTO:EOF
:CompressFiles
java -jar D:-2.4.6.jar %1 -o %~n1-min%~x1
GOTO:EOF
yuicompressor.reg注冊表功能:選中文件夾後,右鍵,會多一個選項【YUI-Compressor JS/CSS】
yuicompressor.reg注冊表文件代碼:
復制代碼代碼如下:
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOTDirectoryshellCompress JS/CSS Files]
@="YUI-Compressor JS/CSS"
[HKEY_CLASSES_ROOTDirectoryshellCompress JS/CSS Filescommand]
@="D:\server\f2etools\yuicompressor\yuicompressor.bat %1"
注意事項:請修改兩個文件中的目錄路徑
批處理文件:yuicompressor.bat和注冊表文件:yuicompressor.reg
---------------------------------------------華麗分割線---------------------------------------
打包壓縮pack-all-min.js
文件如下:
批處理文件:pack-js.bat
需要打包的目錄文件:pack-list.txt
pack-js.bat 代碼:
復制代碼代碼如下:
for /f %%i in (packList.txt) do type %%i >> pack-all.js
java -jar D:-2.4.6.jar --type js --charset utf-8 pack-all.js -o pack-all-min.js
pack-list.txt
jquery.ui.datepicker.js
jquery.ui.dialog.js
jquery.ui.draggable.js
jquery.ui.mouse.js
使用方法:
在當前js文件夾里放入這兩個文件,平時開發用多個源文件,運行pack-js.bat後查看頁面效果,上線前打包成一個壓縮文件,測試無誤後再上線。
④ JS壓縮誰最強對比5款JS代碼壓縮工具
在眾多JS代碼壓縮工具中,誰的實力最為強大?本文對比了JShaman、minify-js、toptal、JSCompress以及一款未命名的工具,來揭示它們的壓縮效果。
首先,測試用的JS代碼原本大小為674位元組。JShaman的表現最為亮眼,壓縮後體積僅為207位元組,壓縮率高達驚人67%。相比之下,minify-js和JSCompress的壓縮後體積都在390位元組左右,效果稍遜於JShaman。而那位未知品牌的工具,壓縮後仍有498位元組,效果最不理想。
JShaman作為專業級工具的代表,不僅有無效代碼清理和邏輯優化功能,還允許用戶根據需求調整變數名長度等設置。然而,UglifyJS,這個國外知名的壓縮工具,多用於開發環境或命令行操作,它在本文測試的jscompress中與babel-minify一起工作,因此沒有單獨列出。
補充測試顯示,UglifyJS的壓縮效果為394位元組,同樣顯示出較強的實力。然而,那些無品牌工具僅能簡單去除代碼的換行和注釋,對代碼結構的優化有限。
綜上所述,專業的JS壓縮工具如JShaman能對代碼進行深度優化和重構,顯著減少代碼體積。因此,建議在選擇JS壓縮工具時,優先考慮那些具備專業優化功能的工具,以獲得最佳的壓縮效果。