JS: Split v2rw.js into plain.js and elm.js, only include JS files when necessary

The trace_log showed that the vast majority of pageviews do not need any
Elm modules at all, so we can save a lot by not loading them on the page.

Some pages (most notably: VN pages for not-logged-in visitors) do need
JS but don't load any Elm modules. I've added a 'js' flag to
HTML::framework_() to indicate that and ensure that plain.js is still
loaded.

1 files changed, 33 insertions, 17 deletions

diff --git a/Makefile b/Makefile
index 953cd1c2..35151029 100644
--- a/Makefile
+++ b/Makefile
@@ -30,14 +30,16 @@ ALL_KEEP=\
 
 ALL_CLEAN=\
 	static/f/vndb.js \
-	static/f/v2rw.js \
+	static/f/plain.js \
+	static/f/elm.js \
 	data/icons/icons.css \
 	sql/editfunc.sql \
 	$(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.css/g')
 
 PROD=\
 	static/f/vndb.min.js static/f/vndb.min.js.gz \
-	static/f/v2rw.min.js static/f/v2rw.min.js.gz \
+	static/f/plain.min.js static/f/plain.min.js.gz \
+	static/f/elm.min.js static/f/elm.min.js.gz \
 	static/f/icons.opt.png \
 	$(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.min.css/g') \
 	$(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.min.css.gz/g')
@@ -115,43 +117,57 @@ static/f/vndb.min.js: static/f/vndb.js
 # Files without that comment are assumed to have '//order:4'.
 # (This trick will not work if we ever add JS files generated by this Makefile)
 JS_FILES=$(shell find elm \! -path 'elm/elm-stuff/*' -name '*.js' -exec sh -c "echo \`grep -Eo '^// *order: *[0-9]+' \"{}\" || echo 4\` \"{}\"" \; | sed -E 's/\/\/ *order: *//' | sort | sed 's/..//')
+
+static/f/plain.js: ${JS_FILES} | static/f
+	echo '// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-only' > $@~
+	echo '// @source: https://code.blicky.net/yorhel/vndb/src/branch/master/elm' >>$@~
+	echo '// SPDX-License-Identifier: AGPL-3.0-only' >>$@~
+	for fn in ${JS_FILES}; do \
+		echo; \
+		echo "(function(){'use strict'; /* $$fn */"; \
+		cat $$fn; \
+		echo "})();"; \
+	done >>$@~
+	echo '// @license-end' >>$@~
+	mv $@~ $@
+
+static/f/plain.min.js: static/f/plain.js
+	uglifyjs $< --comments '/(@license|@source|SPDX-)/' --compress \
+		'pure_getters,keep_fargs=false,unsafe_comps,unsafe'\
+		| uglifyjs --mangle --comments all -o $@
+
+
 ELM_FILES=elm/*.elm elm/*/*.elm
 ELM_MODULES=$(shell grep -l '^main =' ${ELM_FILES} | sed 's/^elm\///')
 
-# Patch the Javascript generated by Elm and append the $JS_FILES to it.
-# Patches include:
+# Patch the Javascript generated by Elm:
 # - Add @license and @source comments
 # - Redirect calls from Lib.Ffi.* to window.elmFfi_*
 # - Patch the virtualdom diffing algorithm to always apply the 'selected' attribute
-define fix-js
+define fix-elm
 	( echo '// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-only'; \
 	  echo '// @license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause'; \
 	  echo '// @source: https://code.blicky.net/yorhel/vndb/src/branch/master/elm'; \
 	  echo '// SPDX-License-Identifier: AGPL-3.0-only and BSD-3-Clause'; \
-	  cat $@ \
+	  cat $@; \
+	  echo; \
+	  echo '// @license-end' \
 	)   | sed 's/var \$$author\$$project\$$Lib\$$Ffi\$$/var __unused__/g' \
 		| sed -E 's/\$$author\$$project\$$Lib\$$Ffi\$$([a-zA-Z0-9_]+)/window.elmFfi_\1(_Json_wrap,_Browser_call)/g' \
 		| sed -E "s/([^ ]+) !== 'checked'/\\1 !== 'checked' \&\& \\1 !== 'selected'/g" >$@~
-	for fn in ${JS_FILES}; do \
-		echo; \
-		echo "(function(){'use strict'; /* $$fn */"; \
-		cat $$fn; \
-		echo "})();"; \
-	done >>$@~
-	echo '// @license-end' >>$@~
 	mv $@~ $@
 endef
 
 elm/Gen/.generated: lib/VNWeb/*.pm lib/VNWeb/*/*.pm lib/VNDB/Types.pm lib/VNDB/ExtLinks.pm lib/VNDB/Config.pm data/conf.pl
 	util/vndb.pl elmgen
 
-static/f/v2rw.js: ${ELM_FILES} ${JS_FILES} elm/Gen/.generated | static/f
+static/f/elm.js: ${ELM_FILES} elm/Gen/.generated | static/f
 	cd elm && ELM_HOME=elm-stuff elm make ${ELM_MODULES} --output ../$@
-	${fix-js}
+	${fix-elm}
 
-static/f/v2rw.min.js: ${ELM_FILES} ${JS_FILES} elm/Gen/.generated | static/f
+static/f/elm.min.js: ${ELM_FILES} elm/Gen/.generated | static/f
 	cd elm && ELM_HOME=elm-stuff elm make --optimize ${ELM_MODULES} --output ../$@
-	${fix-js}
+	${fix-elm}
 	uglifyjs $@ --comments '/(@license|@source|SPDX-)/' --compress \
 		'pure_funcs="F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9",pure_getters,keep_fargs=false,unsafe_comps,unsafe'\
 		| uglifyjs --mangle --comments all -o $@~