Progressive web app and Meteor backend

pwa
1

Hello,

I’m developing on Meteor since vesion 0.5 and now working 1.5.2 on PWA ( progressive web app )

Initial package list is quite standard with
meteor-base@1.1.0 # Packages every Meteor app needs to have
mongo@1.2.2 # The database Meteor supports right now
reactive-var@1.0.11 # Reactive variable for tracker
tracker@1.1.3 # Meteor’s client-side reactive programming library

es5-shim@4.6.15 # ECMAScript 5 compatibility for older browsers.

session@1.1.7
coffeescript@1.11.1_4
check@1.2.5
peerlibrary:reactive-publish
accounts-password@1.4.0
email@1.2.3
ecmascript@0.8.3
meteorhacks:ssr
alanning:roles
random@1.0.10
gfk:mailgun-api
service-configuration@1.0.11
browser-policy@1.1.0
shell-server@0.2.4

meteorhacks:subs-manager
peerlibrary:async
underscorestring:underscore.string
meteorhacks:unblock
lepozepo:cloudinary
dispatch:phoneformat.js
dynamic-import@0.1.3
samy:redux-middlewares
abernix:standard-minifier-js
blaze-html-templates

And with very little custom code in Client folder I have result package size downloaded on client about 956 KB
Most application code sit in /public folder with Polymer library

My question is there any way to reduce initial Meteor loading package since Google propose to have PRPL50 = 50KB initial package size.

P.S. After general cleanup in client folder down size to 896 KB

2

This is a little concerning. I would take a look at Meteor’s recommended application structure.

Moving on… I don’t think it will be possible to get your initial Package size down to 50KB. Someone correct me if I’m wrong, but that’s just not possible unless you’re strictly using Meteor to serve up static pages.

Some tips for reducing bundle size:

  • Use bundle-visualizer to see what is taking up the most memory.
  • Use dynamic imports to ensure you’re only loading exactly what you need when you need it.
  • If you can, find npm replacements for your meteor packages. Some meteor packages don’t lazy load and npm might give you more granular control over imports.
1 Like
3

Take a look at this article: A Pinterest Progressive Web App Performance Case Study. Pinterest recently created a pwa and detailed extensively how they got the size down and performance workarounds.

I would definitely swap out the meteor packages for npm packages wherever you can as bmanturner suggested. I would also load routes dynamically too.

Take a look at the article and try implementing a few things they did.

1 Like