Merge pull request #9 from SmilyOrg/frontend-optimization

Frontend optimization
SmilyOrg · Jul 9, 2022 · 34f0da4 · 34f0da4
2 parents 6d65578 + 4431147
commit 34f0da4
Show file tree

Hide file tree

Showing 11 changed files with 3,405 additions and 2,969 deletions.
diff --git a/go.mod b/go.mod
@@ -16,11 +16,13 @@ require (
 	github.com/go-chi/render v1.0.1
 	github.com/goccy/go-yaml v1.7.17
 	github.com/golang-migrate/migrate/v4 v4.15.0-beta.1
+	github.com/golang/gddo v0.0.0-20210115222349-20d68f94ee1f // indirect
 	github.com/gosimple/slug v1.10.0
 	github.com/hako/durafmt v0.0.0-20200605151348-3a43fc422dd9
 	github.com/imdario/mergo v0.3.12
 	github.com/joho/godotenv v1.3.0
 	github.com/karrick/godirwalk v1.15.6
+	github.com/lpar/gzipped v1.1.0
 	github.com/lucasb-eyer/go-colorful v1.0.3 // indirect
 	github.com/matoous/go-nanoid/v2 v2.0.0
 	github.com/mattn/go-colorable v0.1.9 // indirect

diff --git a/go.sum b/go.sum
diff --git a/justfile b/justfile
@@ -18,6 +18,10 @@ release-local:
 run *args: build
   ./photofield {{args}}
 
+run-static *args:
+  go build -tags embedstatic
+  ./photofield {{args}}
+
 ui:
   cd ui && npm run dev
 

diff --git a/main.go b/main.go
@@ -11,7 +11,9 @@ import (
 	"io/ioutil"
 	"math"
 	"mime"
+	"path"
 	"path/filepath"
+	"regexp"
 	"sort"
 	"strings"
 	"sync"
@@ -32,6 +34,7 @@ import (
 	chirender "github.com/go-chi/render"
 	"github.com/imdario/mergo"
 	"github.com/joho/godotenv"
+	"github.com/lpar/gzipped"
 
 	"github.com/tdewolff/canvas"
 	"github.com/tdewolff/canvas/rasterizer"
@@ -62,6 +65,8 @@ var migrations embed.FS
 //go:embed fonts/Roboto/Roboto-Regular.ttf
 var robotoRegular []byte
 
+var staticCacheRegex = regexp.MustCompile(`.+\.\w`)
+
 var (
 	version = "dev"
 	commit  = "none"
@@ -609,6 +614,7 @@ func GetScenesSceneIdTilesImpl(w http.ResponseWriter, r *http.Request, sceneId o
 	render.Zoom = zoom
 	drawTile(context, &render, scene, zoom, x, y)
 
+	w.Header().Add("Cache-Control", "max-age=86400") // 1 day
 	codec.EncodeJpeg(w, img)
 }
 
@@ -890,12 +896,35 @@ type spaFs struct {
 
 func (fs spaFs) Open(name string) (http.File, error) {
 	f, err := fs.root.Open(name)
-	if os.IsNotExist(err) {
+	if os.IsNotExist(err) && !strings.HasSuffix(name, ".br") && !strings.HasSuffix(name, ".gz") {
 		return fs.root.Open("index.html")
 	}
 	return f, err
 }
 
+func CacheControl() func(next http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		fn := func(w http.ResponseWriter, r *http.Request) {
+			if staticCacheRegex.MatchString(r.URL.Path) {
+				w.Header().Set("Cache-Control", "max-age=31536000")
+			}
+			next.ServeHTTP(w, r)
+		}
+		return http.HandlerFunc(fn)
+	}
+}
+
+func IndexHTML() func(next http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			if strings.HasSuffix(r.URL.Path, "/") || len(r.URL.Path) == 0 {
+				r.URL.Path = path.Join(r.URL.Path, "index.html")
+			}
+			next.ServeHTTP(w, r)
+		})
+	}
+}
+
 func main() {
 
 	startupTime = time.Now()
@@ -1026,11 +1055,18 @@ func main() {
 		if err != nil {
 			panic(err)
 		}
+
 		sfs := spaFs{
 			root: http.FS(subfs),
 		}
-		server := http.FileServer(sfs)
-		r.Handle("/*", server)
+
+		server := gzipped.FileServer(sfs)
+
+		r.Route("/", func(r chi.Router) {
+			r.Use(CacheControl())
+			r.Use(IndexHTML())
+			r.Handle("/*", server)
+		})
 		msg = fmt.Sprintf("ui at %v, %s", addr, msg)
 	}
 

diff --git a/ui/.gitignore b/ui/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 dist
-*.local
+*.local
+stats.html
diff --git a/ui/index.html b/ui/index.html
@@ -6,10 +6,6 @@
   <link rel="manifest" href="/manifest.webmanifest">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
   <title>Photos</title>
-
-  <!-- Your application must load the Roboto and Material Icons fonts. -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body>
   <div id="app"></div>