iT邦幫忙

1

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

  • 分享至 

  • xImage

我知道 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起來的結果(除非原始檔有變動)。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
dragonH
iT邦超人 5 級 ‧ 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
nlstudio
iT邦新手 2 級 ‧ 2020-09-18 22:10:54

你需要的是CDN,CDN將介接過來的html,js,css有選項可以做自動壓縮
你原始碼看到是原本的內容,使用者透過cdn取得內容是壓縮後的結果

我要發表回答

立即登入回答