Optimizing your application layout

Building a JavaScript SPA can often involve many layers of abstraction including custom application code, third party libraries, frontend frameworks, task runners, transpilers, and more. All of this can end up amounting to a whole lot of JavaScript to be downloaded for the application on the frontend, so steps should always be taken to minimize this impact as much as possible.

Let's go back to the Node.js example application we have been working with so far. In Chapter 2Model-View-Whatever we wrote the index.html layout page for the app with the following script tags included for third party libraries and the compiled templates:

<script src="/bower_components/jquery/dist/jquery.min.js"></script> <script src="/bower_components/handlebars/handlebars.runtime.min.js"></script> ...

Get Mastering JavaScript Single Page Application Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.