Easiest tool to bundle an already existing Angular 2 application

Question

I have an already working Angular 2 application with express as a backend server.

The express server has some logic that redirects the request to the right path based on the URL and file type, meaning, there is no one "public path" that has all of the files.

I found out that my application takes 16 seconds to load and 454 requests are being made to the server on first load.

Since I didn't know I had to handle bundling, I'm a little stuck. So now I'm very confused regarding which tool to use for bundling while keeping the server side as it is (express server).

I've tried webpack but it has webpack-dev-server as the backend and that means I need to refactor the express server logic to fit the webpack server or use the webpack server as a middleware and that also looks like a lot of hassle.

I saw some other options but lost my way in the middle since there is too much information and little amount of simple examples.

Some of the tools I saw where gulp, rollup, systejs-builder, browserify. Please help me find the easiest way to handle bundling and supply examples explanations if you can.

Answer 1

You are probably using SystemJs in your application for modules, so you can check e.g. this question with an example using SystemJsBuilder.

Another option is to use WebPack and Google has a documentation on how to do this here.

This is the code from the first reference:

// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/semantic-ui/dist/semantic.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/lib/js'));
});

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(tsc({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "public/dist/js",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);