title: JSPM vs WebPack for Angular 2
body: <p>Recently I've used JSPM for my angular 2 projects and found it very simple and convenient to work with. Both when it comes to adding new modules, and creating a bundle for production use.</p>
  
  <p>It's basically just:</p>
  
  <pre><code>jspm install npm:@angular/somepackage
  </code></pre>
  
  <p>and the package.json and system.js configs are updated automatically for me.</p>
  
  <p>When I want to create a production bundle I simply do this:</p>
  
  <pre><code>jspm bundle-sfx app/main app-bundle.min.js --minify
  </code></pre>
  
  <p>And to use it I just make an html like this:</p>
  
  <pre><code> &lt;body&gt;
     &lt;my-app&gt;Loading...&lt;/my-app&gt;
     &lt;script src="app-bundle.min.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>It loads and runs fast. Used it for both small and big Angular 2 applications.</p>
  
  <p>Development setup is also satisfactory - reloading the app is fast enough and debugging goes well. Also very good to be able to use almost any module from the NPM repository through JSPM. </p>
  
  <p>When reading articles out there, I get the impression that people are moving on to webpack for Angular 2 apps. I haven't moved to webpack myself, because I think my setup works fine and webpack seems like a lot more configuration.</p>
  
  <p>Yet I'm worried that support for JSPM will fade out, since it seems like more and more are moving over to webpack.</p>
  
  <p>Should I switch to webpack because of this? Would switching to webpack give me some benefits that I've not discovered?</p>
  
  <p>I have some very simple Angular 2 quick start templates demonstrating my setup that can be found here: <a href="https://github.com/fintechneo/angular2-templates" rel="noreferrer">https://github.com/fintechneo/angular2-templates</a></p>
  
  <p>Would be very happy to get some opinions about the benefits of switching to webpack for this setup.</p>
  
  <hr>
  
  <p><strong>UPDATE 2017-03-26</strong></p>
  
  <p>Since this question was posted I found the need for even faster loading times for production builds. Even though JSPM (or webpack) produce an optimized bundle, it's still too big and needs the angular2 templates to be compiled after the bundle is downloaded.</p>
  
  <p>So I found the Ahead-of-Time compiler cookbook (<a href="https://angular.io/docs/ts/latest/cookbook/aot-compiler.html" rel="noreferrer">https://angular.io/docs/ts/latest/cookbook/aot-compiler.html</a>) - which makes small bundles that starts in no time after downloading.</p>
  
  <p>This required a parallell setup though with all the angular modules installed using npm (not jspm). Probably possible to use JSPM for this too with some effort, but I haven't looked into it yet. Both JSPM and this AoT cookbook use rollup, so it would to get the ngc compiler step integrated with JSPM, but the tricky part is to get TypeScript to use jspm_packages rather than node_modules.</p>
  
  <p>The link above with the setup is updated with the AoT, and still uses JSPM for the dev environment.</p>