{"id":8641,"date":"2015-11-26T12:15:59","date_gmt":"2015-11-26T10:15:59","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=8641"},"modified":"2015-11-18T20:19:41","modified_gmt":"2015-11-18T18:19:41","slug":"backbonejs-webpack-lesson-optimization","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/backbonejs-webpack-lesson-optimization\/","title":{"rendered":"BackboneJS with Webpack: A lesson in optimization"},"content":{"rendered":"

Developing a large BackboneJS\u00a0application presents a unique design problem. As developers, we like to organize our code so it is understandable, logical, and predictable. However, doing so can cause performance issues on the client side.<\/p>\n

In this blog I will discuss a handy tool I like to use for this purpose: Webpack. I\u2019ll show it in action, how to use it, and what it is good for. But first, let\u2019s talk about how I came across Webpack.<\/p>\n

An Example<\/h2>\n

On a previous project, I was building an audio and video streaming player. The frontend was developed using BackboneJS. I used libraries such as jQuery and SocketIO. Using Require shim configuration, I ended up with my dependencies \/ exports organized as follows.<\/p>\n

require.config({\r\n    baseUrl: \"js\/\",\r\n    paths: {\r\n        jquery: 'libs\/jquery.js',\r\n        underscore: '\/libs\/underscore.js\/1.6.0\/underscore-min',\r\n        socketio: '\/libs\/socket.io\/0.9.16\/socket.io.min',\r\n        backbone: '\/libs\/backbone.js\/1.1.0\/backbone-min',\r\n        templates: 'templates'\r\n    },\r\n    shim: {\r\n        'jquery': {\r\n            exports: '$'\r\n        },\r\n        'backbone': {\r\n            deps: ['underscore', 'jquery'],\r\n            exports: 'Backbone'\r\n        },\r\n        'underscore': {\r\n            exports: '_'\r\n        },\r\n        'socketio': {\r\n            exports: 'io'\r\n        }\r\n    }\r\n});<\/pre>\n
This worked great for my loading all my libraries. For each of my files, I defined the libraries I wanted to use. Breaking down each of my files into modules is a great way to handle organizing the large code base. Then I used\u00a0the RequireJS AMD text resource loader<\/a> plugin\u00a0to load all template files.<\/p>\n
define([\r\n    'jquery',\r\n    'underscore',\r\n    'backbone',\r\n    'text!templates\/recordings\/recordingTemplate.html'\r\n], function($, _, Backbone, recordingTemplate) {\r\n   \/\/ Do some stuff\r\n}<\/pre>\n
At the time this was a decent solution. My code base was organized, easy to understand, and predictable. However, the larger my application became, a performance problem began to develop. For each template that was added, a new call to the server was made. This began to balloon the initial loading time of the application.<\/p>\n
\"\"<\/p>\n
Wouldn\u2019t it be great if all necessary resources were compacted into a single file, optimizing the loading time, and still be able to keep our code organized?<\/p>\n
Developing a BackboneJS app all in a single file would be frustrating\u00a0experience to manage.\u00a0That\u2019s where Webpack comes to the rescue.<\/p>\n
What is Webpack?<\/strong><\/p>\n
Webpack is a module bundler that takes your files, compacts them, and generates a static file. Think of it as your own personal secretary\u00a0there to help keep your life organized. You provide the configuration, it supplies the optimization.<\/p>\n
Webpack\u2019s primary goal is\u00a0to keep initial loading time down. It does this by code splitting<\/a><\/em>, and loaders<\/a><\/em>.<\/p>\n
Code Splitting<\/strong><\/p>\n
Code splitting is ideal for\u00a0large applications where it is not efficient to put all code into a single file. Some blocks of code may only be useful for certain pages of the site. Using this opt-in feature allows you to define the split points in your code base, and Webpack will optimize the dependencies required to generate the optimal bundle.<\/p>\n
var a = require(\"a\");\r\nrequire.ensure([\"b\"], function(require) {\r\n    require(\"a\").dosomething();\r\n    var c = require(\"c\");\r\n});<\/pre>\n
This example uses CommonJS require.ensure<\/a>\u00a0to load resources on demand. The final output would contain two chunked files:<\/p>\n