Using WebPack Modules on Single Page Application (SPA) for Improved Performance

Single Page Application 

Quite common and powerful application type, this can be implemented in several ways, but for an efficient deign for SPA, be it Salesforce application written on Angular/React you have to think about Load Performance.

How to improve Load Performance for SPA ?

You can do that by solving two major problems 

• Minimum # of http requests 

• Minimum # of data downloaded through network

Every single http request, sent request over noisy network and you get response on noisy network and you also want to minimize the number of bytes downloaded for obvious reason as well. 

Is concatenating javascript into one big file is best practice ?

Imagine concatenating 10MB of javascript after minification and on .gzip turn to 3MB for Mobile Responsive Single Page Application. If you talk about optimization, then 3MB is still pretty big, specially for mobile device, which has strong resource constraints. So we might be downloading javascript in wrong way then also if you are using CDN on visualforce pages lets say, then you are polling CDN server to deliver script, it can be expensive.

How do improve performance then ?

There is a better way of doing this by 

1. Only downloading javascript you need for 'each page'

1. Single page app "page" == entry point (components in the page)

1. There could be multiple entry point (components, you don't have re-render all everytime)

1. Subsequent navigation should not download same javascript again, and can use shared libraries.

 In simple words, only download javascript you need at given point of time

Imagine a webpage (visualforce) with ten other components, lets say one component is listing opportunities and when you go to detail views of record, you only need minimum code to display record, but you don't need to reload the whole page or re-render the other components hosted on page.

In here, we don't want javascript code from CDN or in-house to be re-rendered or transferred through wires, so question is how can we do it ? 

Using Module Design with Javascript 

Module is bundle of minimum required to render a component, as we know that browse do not understand what bundle/module is but it understand what a flat file of javascript is, some of the well known tool that can compile minimum required into module is this is 'browserify' and 'requirejs', basically what they do is, they  take dependency graph of javascript and turn it into flat files, you will use a global function called require which is equivalent to import statement in java or similar programming language to load this bundle and perform the job.




Now with SPA apps, when you click a link, you do not sent request to server, but instead javascript on your SPA is interpreting your action and determine what needs to be done on that event with minimum required bundle

Static Resources 

You might have noticed an escalation of build tool in the world of javascript (Gulp/Grunt/Brocolli) and what they all do is, take a bunch of file (static resources) minify them in some way and output it, you might use it for pre-processor like less for css or coffee script which is an extension of javascript, you can run it through pre-processor before you upload.

Now we want required css to be loaded first before load the module, for example 

Loading pre-processor in modules 

How about loading the pre-processor like less/sass in the module itself, because we want to transform these files in any case, if we plan to use pre-processors

Carefully looking there is one open source that can do all bundling of modules for us, while other tools have few limitations

Browserify : This is all about making one giant javascript by compiling all your javascript into one file.
RequireJs : It usually make an http request or it compiles all file one giant file
Grunt.Js : Doesn't know about dependency graph
GulpJs : Better grunt, as it uses streams which in turn performs better than grunt but, it still uses idea of files not modules

Introducing Webpack 

A bundler for javascript Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS

Basically, webpack is build with the idea of dependency graph in the modules and not based of flat files, or module that must be combined into single file.

WebPack for typical module could be collection of html javascript and image together

How does web pack work ?

Instead of explaining you in words, I recommend watching this coolest of video recorded by +Kyle Robinson Young, where he explain, dependency mapping, order of loading on modules, and other coolest feature of webpage(including reduced page size). All credit of this video, goes to Kyle