---
title: Angular 2, system.js and webpack
description: "Angular2’s tutorials and quick start use SystemJS to load your app. I have often\nused webpack for my front end distributions and decided to take a look at the\ndifferences.\n\nI will be using gulp, and have two branches in a repo\n[https://bitbucket.org/IpponMattRitter/angular2-color-palette] for a"
image: https://blog.ippon.tech/hubfs/Imported_Blog_Media/angular-3.jpg
---
[Skip to main content](https://blog.ippon.tech/angular-2-system-js-and-webpack#main)
[   ](https://ipponusa.com/)
- [Home](https://ipponusa.com)
- [Show submenu for About About](https://ipponusa.com/about-us)
- [Who We Are](https://ipponusa.com/who-we-are)
- [Careers](https://ipponusa.com/careers)
- [Show submenu for Our Partners Our Partners](https://ipponusa.com/our-partners/)
- [AWS](https://ipponusa.com/our-partners/aws/)
- [Snowflake](https://ipponusa.com/our-partners/snowflake/)
- [Databricks](https://ipponusa.com/our-partners/databricks/)
- [Microsoft](https://ipponusa.com/our-partners/microsoft/)
- [Show submenu for Services Services](https://ipponusa.com/services)
- [Snowflake](https://ipponusa.com/service/snowflake-concierge/)
- [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/)
- [Data & Analytics](https://ipponusa.com/service/data-analytics/)
- [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/)
- [Platform Modernization](https://ipponusa.com/service/platform-moderization/)
- [Product Innovation](https://ipponusa.com/service/product-innovation/)
- [Operating Model](https://ipponusa.com/service/operating-model/)
- [Blogs](https://blog.ippon.tech/)
- [Success Stories](https://ipponusa.com/success-stories/)
- [Show submenu for Resources Resources](https://ipponusa.com/resources/)
- [eBooks](https://ipponusa.com/ebooks/)
- [The Data Pour](https://info.ippon.tech/the-data-pour)
- [Videos & Webinars](https://info.ippon.tech/videos-and-webinars)
- [Media Center](https://ipponusa.com/media-center/)
Search
Open main navigation
Close main navigation
- [Home](https://ipponusa.com)
- Show submenu for About About
- About
- [About](https://ipponusa.com/about-us)
- [Who We Are](https://ipponusa.com/who-we-are)
- [Careers](https://ipponusa.com/careers)
- Show submenu for Our Partners Our Partners
- Our Partners
- [Our Partners](https://ipponusa.com/our-partners/)
- [AWS](https://ipponusa.com/our-partners/aws/)
- [Snowflake](https://ipponusa.com/our-partners/snowflake/)
- [Databricks](https://ipponusa.com/our-partners/databricks/)
- [Microsoft](https://ipponusa.com/our-partners/microsoft/)
- Show submenu for Services Services
- Services
- [Services](https://ipponusa.com/services)
- [Snowflake](https://ipponusa.com/service/snowflake-concierge/)
- [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/)
- [Data & Analytics](https://ipponusa.com/service/data-analytics/)
- [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/)
- [Platform Modernization](https://ipponusa.com/service/platform-moderization/)
- [Product Innovation](https://ipponusa.com/service/product-innovation/)
- [Operating Model](https://ipponusa.com/service/operating-model/)
- [Blogs](https://blog.ippon.tech/)
- [Success Stories](https://ipponusa.com/success-stories/)
- Show submenu for Resources Resources
- Resources
- [Resources](https://ipponusa.com/resources/)
- [eBooks](https://ipponusa.com/ebooks/)
- [The Data Pour](https://info.ippon.tech/the-data-pour)
- [Videos & Webinars](https://info.ippon.tech/videos-and-webinars)
- [Media Center](https://ipponusa.com/media-center/)
- Search
- [Contact Us](https://ipponusa.com/contact/)
[Contact Us](https://ipponusa.com/contact/)
# Angular 2, system.js and webpack
by [Matt Ritter](https://blog.ippon.tech/author/matt-ritter)
December 16, 2016
[Front-End](https://blog.ippon.tech/tag/front-end/)
[Matt Ritter](https://blog.ippon.tech/author/mritter/) Dec 16, 2016
Angular2’s tutorials and quick start use SystemJS to load your app. I have often used webpack for my front end distributions and decided to take a look at the differences.
I will be using gulp, and have two branches [in a repo](https://bitbucket.org/IpponMattRitter/angular2-color-palette?ref=blog.ippon.tech) for a simple app to compare how SystemJS and webpack serve up the same app.
I am using Chrome’s developer tools to look at load time. Perhaps not the most accurate, but for comparisons it suits this fine.
Let's look at load time for the two approaches.
First using SystemJS, out of the branch named systemjs in the above Bitbucket repo.
Using SystemJS we have 51 requests, 2.1mb transferred, finished in 4.44s, Dom Content loaded in 1 s, with final load in 1.11s. The app is not usable until the finished time of 4.44s. Compiler.umd.js, being 782k, is the biggest hold up.
Now let's see how webpack does.
We have 11 requests, 850kb transferred, finish in 1.73s, DomContentLoaded: in 2.17s and load in 2.17s. The app is usable at 2.17 seconds.
As mentioned earlier I’m using gulp for webpack, I also used gulp for the SystemJS, but as that is pretty similar to what you get out of Angular2’s quick start there isn’t much point in discussing it.
```
const gulp = require('gulp'),
tslint = require('gulp-tslint'),
webpack = require('gulp-webpack'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
del = require('del'),
// variables for source and public directories
sourceDir = "./app/source",
publicDir = "./app/public";
```
The packages I’m using in addition to gulp are:
- **gulp-tslint** is used with watch.
- **gulp-sass** is used both with watch and as part of the build process.
- **gulp-del** is part of the clean process.
You may also notice I’m using two variables “sourceDir” and “publicDir.” They are, as their name suggests, the location of the source files and public, or distribution, files. The gulp file in the repo has comments to explain what and why.
Gulp-webpack is what handles the bundling.
```
gulp.task('webpack', ['clean', 'tslint'], function () {
return gulp.src(sourceDir + '/')
.pipe(webpack({
entry: {
app: sourceDir + '/main.ts',
},
output: {
filename: '[name].js'
},
resolve: {
extensions: ['','webpack.js', 'web.js', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader'}
]
}
}))
.pipe(uglify())
.pipe(gulp.dest(publicDir + '/js/'))
});
```
Modules are needed so webpack will know what to do with TypeScript. Uglify is then minimizing the final Javascript file.
It is not surprising that webpack would load quicker, but I did not expect it to make as much of a difference as it did. SystemJS is great for a development environment, and debugging, as you can easily see what files are creating issues. Just keep in mind that if you are having page performance and loading issues, it might be worth checking that first.
## Related Articles
##### [ Google Cloud • November 4, 2025 Riding the Prompt Wave 7 min read](https://blog.ippon.tech/riding-the-prompt-wave)
##### [ Software Engineering • October 22, 2025 AI in the Browser; Another Final Frontier 6 min read](https://blog.ippon.tech/ai-in-the-browser-another-final-frontier)
##### [ Vue • February 8, 2024 Cache Me Outside: Essential Caching Techniques for Building High-Performance SPAs 5 min read](https://blog.ippon.tech/essential-caching-techniques-for-building-high-performance-spas)
### Comments
### Subscribe to Our Blog!
Stay informed with the latest insights and updates by signing up for our weekly blog newsletter – delivered straight to your inbox!
[Back to blog homepage »](https://blog.ippon.tech/)
Ippon is a consulting and expertise firm, who is convinced that technology is a source of progress for society. We help our clients leverage their digital assets to design an appropriate strategy and deploy their transformation roadmap at scale.
#### Navigation
- [Home](https://ipponusa.com/)
- [About](https://ipponusa.com/about-us/)
- [Services](https://ipponusa.com/services/)
- [Blogs](https://blog.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
- [eBooks](https://ipponusa.com/ebooks/)
- [The Data Pour](https://info.ippon.tech/the-data-pour?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
[Contact Us](https://ipponusa.com/contact/)
[Join Us](https://ipponusa.com/careers/)
#### Services
- [Data & Analytics](https://ipponusa.com/service/data-analytics/)
- [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/)
- [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/)
- [Operating Model](https://ipponusa.com/service/operating-model/)
- [Platform Modernization](https://ipponusa.com/service/platform-moderization/)
- [Product Innovation](https://ipponusa.com/service/product-innovation/)
#### Ippon International
- [France](https://fr.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
- [Australia](https://au.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
- #### Contact
- Ippon Technologies
[3431 West Leigh Street Richmond, VA 23230, USA](https://maps.app.goo.gl/RySm6SAwZnsxeiLz9)
- [(844) 477- 6687](tel:8444776687)
- [Sales@ipponusa.com](mailto:Sales@ipponusa.com)
©Copyright 2024 Ippon USA. All Rights Reserved. | [Terms and Conditions](https://ipponusa.com/privacy-policy/) | [Privacy Policy](https://ipponusa.com/privacy-policy/) | [Website by Skol Marketing](https://skolmarketing.com/)
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Matt Ritter",
"url" : "https://blog.ippon.tech/author/matt-ritter"
},
"dateModified" : "2024-01-25T17:55:38.996Z",
"datePublished" : "2016-12-16T17:55:00.000Z",
"headline" : "Angular 2, system.js and webpack",
"image" : [ "https://blog.ippon.tech/hubfs/Imported_Blog_Media/angular-3.jpg" ],
"mainEntityOfPage" : {
"@id" : "https://blog.ippon.tech/angular-2-system-js-and-webpack",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blog.ippon.tech/hubfs/logo_SVG.svg"
},
"name" : "Ippon Technologies"
}
}
```