search

readthedocs / addons

JavaScript client to integrate with Read the Docs nicely
https://readthedocs-addons.readthedocs.io/
MIT License
17 stars 3 forks source link

Reduce file size (use lazy load) #8

Open humitos opened 1 year ago

humitos commented 1 year ago

After adding support for #2, I started getting this warning.

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  readthedocs-client.js?e7a609ea7aa504ee55ae (244 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  readthedocs-client (244 KiB)
      readthedocs-client.js?e7a609ea7aa504ee55ae

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
agjohnson commented 1 year ago

Code splitting is a good first step, and making a bundle for jQuery. There is configuration in site-community and ext-theme for setting jQuery as an external library and moving it to a separate file using the webpack common chunks feature. From there, lazy loading is possible and a good next step to reducing load time.

I'd put all of this on a later revision though, we don't need optimizations just yet.

humitos commented 1 year ago

I un-bundled the EthicalAd client in https://github.com/readthedocs/addons/pull/104 for now. This, besides other benefits, also helps to reduce the file size. The main benefit is on commercial since we don't have ads there.