Hi Community,

I was working on revamping the javascript code base to make it modular as GSoC 18 project.

While revamping the code base, I introduced webpack as the bundler to create a production bundle but the combined bundle coming out to be was large which was not good in terms of performance.

So I have decided to use code splitting which will create small bundles and they can be used for different pages. But there are two options for ode splitting. The first one is to create multiple entry points which will generate file specific bundles having independent scope of modules imported in those specific files and the other one is dynamic imports which will split the code at dynamic import points.

So I have decided to go with dynamic imports for code splitting because in this method, the bundles will have a common scope and the bundles can be downloaded at the time of need. We don't need to take care of which scripts have been downloaded. Webpack uses a JSONP function for loading the chunks asynchronously and these downloaded chunks will remain in the head of the document until the page reloads. This will ensure that chunks which are loaded once will not be loaded again.

Some Important Links: https://webpack.js.org/guides/code-splitting/ https://medium.com/@piyush3079/week3-gsoc-with-phpmyadmin-41a1b7f1dd70 https://github.com/phpmyadmin/phpmyadmin/issues/14355