GX9001: page route is over its budget

Cause#

gx.toml has a budget for the page routes. A page loads more gzipped bytes of JS, or of CSS, than the budget of its route.

gx check runs the app for this check. It reads each page with no parameter and each page of .Static. It adds the size of each script, each island module with its imports, and each stylesheet that the page names. A file of a different origin is not in the sum.

An app with no [budget] table has no check. Gx has no default number.

Example#

[budget]
css = 60

package route

import "github.com/alternayte/gx"

type Home struct {
	gx.Route `GET /{$}`
}

package home

import (
	"github.com/alternayte/gx"
	"app/home/route"
)

var Page = gx.Page(func(c *gx.Ctx, in route.Home) (ViewProps, error) {
	return ViewProps{}, nil
}, View)

var Routes = gx.Collect(Page)

package home

<main class="hero">
  <h1 class="title">Shop</h1>
</main>

package main

import (
	"net/http"
	"os"

	"github.com/alternayte/gx"
	"app/home"
)

// The stylesheet of the app. A real app builds it with Tailwind.
const css = `.hero { margin: 0 auto; max-width: 48rem; padding: 2rem }
.title { font-size: 2rem; font-weight: 600; line-height: 1.2 }
`

func main() {
	gx.SetStylesheet([]byte(css))
	app := gx.New(gx.Config{})
	app.Group("/", home.Routes)
	_ = http.ListenAndServe(os.Getenv("GX_DEV_ADDR"), app)
}

gx check reports:

gx.toml:1:1: GX9001: the page / of the route GET / loads 122 bytes of CSS (gzipped), and its budget is 60: /_gx/app.css 122

The message names each file, the largest first.

The budget table#

• js and css in [budget] are the numbers of each route, in gzipped bytes.
• A table [budget.routes."GET /basket"] sets the numbers of one route. A number that it does not set is the number of [budget].

Fix#

1. Load less on the page. A page with no signal, no action and no behaviour loads no JS.
2. Move a large island to a different page, or to a load strategy that waits.
3. For the CSS, give the page its own stylesheet: see "A stylesheet for each route" in the styling guide.
4. If the page needs the files, change the budget of the route.