updated with a few numbers
This commit is contained in:
parent
5bbd170638
commit
3863238050
2 changed files with 62 additions and 9 deletions
|
@ -36,7 +36,7 @@ i=0;
|
||||||
typeset -A assoc
|
typeset -A assoc
|
||||||
for c in $classes; do
|
for c in $classes; do
|
||||||
sn=$(shortName $i)
|
sn=$(shortName $i)
|
||||||
print "$c -> $sn"
|
print -- "$c -> $sn"
|
||||||
assoc[$c]=$sn
|
assoc[$c]=$sn
|
||||||
((i++))
|
((i++))
|
||||||
done
|
done
|
||||||
|
@ -48,12 +48,21 @@ for long in $classes; do
|
||||||
cssreplacer=$cssreplacer's#\.'${long}'#.'${assoc[$long]}'#g;'
|
cssreplacer=$cssreplacer's#\.'${long}'#.'${assoc[$long]}'#g;'
|
||||||
done
|
done
|
||||||
|
|
||||||
|
sizeof() {
|
||||||
|
stat --format="%s" "$*"
|
||||||
|
}
|
||||||
|
|
||||||
for fic in $webdir/**/*.{html,xml}(N); do
|
for fic in $webdir/**/*.{html,xml}(N); do
|
||||||
print -- $fic
|
before=$(sizeof $fic)
|
||||||
|
print -n -- "$fic ($before"
|
||||||
perl -pi -e $htmlreplacer $fic
|
perl -pi -e $htmlreplacer $fic
|
||||||
|
after=$(sizeof $fic)
|
||||||
|
print -- " => $after [$(( ((before - after) * 100) / before ))])"
|
||||||
done
|
done
|
||||||
for fic in $webdir/**/*.css(N); do
|
for fic in $webdir/**/*.css(N); do
|
||||||
echo $fic
|
before=$(sizeof $fic)
|
||||||
|
print -n -- "$fic ($before"
|
||||||
perl -pi -e $cssreplacer $fic
|
perl -pi -e $cssreplacer $fic
|
||||||
|
after=$(sizeof $fic)
|
||||||
|
print -- " => $after [$(( ((before - after) * 100) / before ))])"
|
||||||
done
|
done
|
||||||
|
|
|
@ -22,14 +22,49 @@ is always the risk the JS code generate class names to manipulate the DOM.
|
||||||
So here is a small script I wanted to write from a long time that do the following:
|
So here is a small script I wanted to write from a long time that do the following:
|
||||||
|
|
||||||
1. retrieve all class names in the HTML and in the CSS
|
1. retrieve all class names in the HTML and in the CSS
|
||||||
2. create an associative from those long names to shorter names
|
2. create a map from those long names to shorter names
|
||||||
3. replace the class names in the HTML and CSS files.
|
3. replace the class names in the HTML and CSS files.
|
||||||
|
|
||||||
Here is my quick and dirty script doing that:
|
So if you have multiple HTML files with:
|
||||||
|
|
||||||
|
#+begin_src html
|
||||||
|
<div class="long-org-class-generated-by-org-mode">...</div>
|
||||||
|
#+end_src
|
||||||
|
|
||||||
|
and CSS files with:
|
||||||
|
|
||||||
|
#+begin_src css
|
||||||
|
pre .long-org-class-generated-by-org-mode { ... }
|
||||||
|
#+end_src
|
||||||
|
|
||||||
|
Those will be replaced by something like:
|
||||||
|
|
||||||
|
#+begin_src html
|
||||||
|
<div class="av">...</div>
|
||||||
|
#+end_src
|
||||||
|
|
||||||
|
and CSS files with:
|
||||||
|
|
||||||
|
#+begin_src css
|
||||||
|
pre .av { ... }
|
||||||
|
#+end_src
|
||||||
|
|
||||||
|
And thus removing many superfluous bytes.
|
||||||
|
|
||||||
|
In my personal website, I run this script avec minifying my HTML and CSS
|
||||||
|
with classical tools.
|
||||||
|
And I still get up to 32% smaller HTML and 22% smaller CSS.
|
||||||
|
|
||||||
|
Many 25% smaller HTML if there are a lot of code, because org-mode use very
|
||||||
|
long class names when generating the code.
|
||||||
|
|
||||||
|
Not bad for a very basic solution.
|
||||||
|
|
||||||
|
If you want to try it; here is the quick and dirty script I use:
|
||||||
|
|
||||||
#+name: optim-classes.sh
|
#+name: optim-classes.sh
|
||||||
#+begin_src bash
|
#+begin_src bash
|
||||||
#!/bin/zsh
|
#!/usr/bin/env zsh
|
||||||
|
|
||||||
webdir="_site"
|
webdir="_site"
|
||||||
|
|
||||||
|
@ -67,7 +102,7 @@ i=0;
|
||||||
typeset -A assoc
|
typeset -A assoc
|
||||||
for c in $classes; do
|
for c in $classes; do
|
||||||
sn=$(shortName $i)
|
sn=$(shortName $i)
|
||||||
print "$c -> $sn"
|
print -- "$c -> $sn"
|
||||||
assoc[$c]=$sn
|
assoc[$c]=$sn
|
||||||
((i++))
|
((i++))
|
||||||
done
|
done
|
||||||
|
@ -79,14 +114,23 @@ for long in $classes; do
|
||||||
cssreplacer=$cssreplacer's#\.'${long}'#.'${assoc[$long]}'#g;'
|
cssreplacer=$cssreplacer's#\.'${long}'#.'${assoc[$long]}'#g;'
|
||||||
done
|
done
|
||||||
|
|
||||||
|
sizeof() {
|
||||||
|
stat --format="%s" "$*"
|
||||||
|
}
|
||||||
|
|
||||||
for fic in $webdir/**/*.{html,xml}(N); do
|
for fic in $webdir/**/*.{html,xml}(N); do
|
||||||
print -- $fic
|
before=$(sizeof $fic)
|
||||||
|
print -n -- "$fic ($before"
|
||||||
perl -pi -e $htmlreplacer $fic
|
perl -pi -e $htmlreplacer $fic
|
||||||
|
after=$(sizeof $fic)
|
||||||
|
print -- " => $after [$(( ((before - after) * 100) / before ))])"
|
||||||
done
|
done
|
||||||
for fic in $webdir/**/*.css(N); do
|
for fic in $webdir/**/*.css(N); do
|
||||||
echo $fic
|
before=$(sizeof $fic)
|
||||||
|
print -n -- "$fic ($before"
|
||||||
perl -pi -e $cssreplacer $fic
|
perl -pi -e $cssreplacer $fic
|
||||||
|
after=$(sizeof $fic)
|
||||||
|
print -- " => $after [$(( ((before - after) * 100) / before ))])"
|
||||||
done
|
done
|
||||||
#+end_src
|
#+end_src
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue