What steps have you taken to reduce your client bundle (and CSS) size?

1

I’ve got my js bundle down to 255KB (which I’m sure isn’t that small) after a few days of trimming unnecessary packages and code.

I have also decided to serve a trimmed version of bootstrap, which for now has only removed the few KB of unused glyphicons (there are hundreds of them). I know that CDNs exist for bootstrap but most of my paying users will come from the Eastern U.S. which is where my servers are. I think reusing the web connection will prevent an extra http request which could ultimately be faster and allow me to serve a trimmed version of bootstrap. I would be happy to read arguments against this approach. Maintaining this trimmed version of bootstrap will become more difficult over time, but right now my app is small and it’s possible. Serving my own bootstrap should result in a 5-10% overall savings once bootstrap is fully trimmed.

What unconventional steps have you taken to trim the overall size of your app to users? I am going to explore pre-rendering the html of the (by far) most important view of my app and then loading the actual app js but am concerned that that second step will be glitchy and difficult to setup.

2

I’m using an enhanced version of UglifyJS that shaves additional bytes: https://github.com/ssrwpo/uglifyjs2

It’s production ready. You can see it running on this site: https://www.panoplycity.com/

1 Like
3

For the CSS, I’m using https://atmospherejs.com/juliancwirko/postcss with the following configuration:

  "postcss": {
    "plugins": {
      "postcss-normalize": {},
      "postcss-flexbugs-fixes": {},
      "cssnano": {
        "discardComments": {
          "removeAll": true
        },
        "autoprefixer": {
          "add": true,
          "remove": true,
          "browsers": [
            "last 5 versions"
          ]
        },
        "convertValues": {
          "length": true,
          "precision": 2
        },
        "normalizeCharset": {
          "add": false
        },
        "zindex": false
      }
    }
  },
1 Like