iT邦幫忙

1

如何讓顯示的 html, css, js 自動壓縮?

我知道 js 跟 css 有壓縮工具
但這樣等於是要手動去完成壓縮
我想到一個問題是
如何讓他顯示的時候是壓縮無空白、無斷行的
但是我在 IDE (ATOM)編輯時是可以看到完整 beautifier 的(未壓縮前的原始檔)?
這有辦法做到嗎?
檢視原始檔的時候看網頁只會有 Line 1 這樣,因為都變一排了
以及 js 跟 css 是否可以用相同的方式解決?我看 cloudflare 有 css 跟 js 幫你壓縮的技術(清除空白),是否會有這種方式自己也可以試試?
謝謝~~~~
html的部分,目前是想到 php 的 str_replace

fillano iT邦超人 1 級 ‧ 2019-08-05 13:44:28 檢舉
壓縮/混淆這件事情會吃系統資源的,不建議讓他每次request都做。

.NET MVC有類似的機制叫做Bundle,是在伺服器端執行的壓縮跟pack動作,但這是在每次應用程式啟動時才跑,之後應該都是輸出cache起來的結果(除非原始檔有變動)。

2 個回答

1
dragonH
iT邦大師 1 級 ‧ 2019-08-04 14:43:30
最佳解答

你的論點有點奇怪

如何讓他顯示的時候是壓縮無空白、無斷行的
但是我在 IDE (ATOM)編輯時是可以看到完整 beautifier 的(未壓縮前的原始檔)?

production 的 js 或 css 要壓縮是沒問題的

但如果你要編輯

應該是去用未 uglify 的 source code 來編輯

編輯完成再 uglify

而且通常 minify 跟 uglify 是會一起用的

所以絕對不是只有切空白這麼簡單

真的想自己做

去看 uglifyjs-webpack-plugin 的 code

自己改成 php 版的吧

另外

如果你是想要達到類似加密的目的

你可能會失望

這基本上只能達到 減少傳輸大小 跟 基本混淆 的功用

但如果你的 function 很簡單

就算 uglify

看呼叫 function 跟 params

也能推出

純 minify 的

chrome 也有內建

pretty print

https://ithelp.ithome.com.tw/upload/images/20190804/20117259lFktGHRAvr.png

https://ithelp.ithome.com.tw/upload/images/20190804/20117259KtbgHHJq1q.png

0
vegalou
iT邦新手 4 級 ‧ 2019-08-04 15:32:39

這是很古老的想法,on fly minify

透過界面轉換原形而已

實際上有幫助嗎?

應該是沒有,原始碼,還是原始碼,並沒有代數混淆

而且,現在頻寬這麼快,壓縮那一點點頻寬,跟已經追上影像流的頻寬比

實在是,

微不足道

我要發表回答

立即登入回答