Angular2项目，Js和HTML的捆绑和最小化

Question

Been working on an angular2 project for a while now, after updating it from angular1 (loving angular2 btw).

Now i would like to bundle the project, but unsure what is the best bundler to use? Also i see some posts saying that they split the bundle into multiple files (like app.bundle.js and vendors.bundle.js) and others have 1 large file. What is the best method? I always throught that many files were better because browsers can download multiple files at the same time? Do you need to use a gulp task for all this, or something else completely?

Also, how can i minify the HTML templates in an angular2 app?

Answer 1

You can either use Webpack or Systemjs-Builder to bundle your app. There are tons of seed projects from which you can take hints eg this and this and you can use this in your gulp task to inline the templates with your build.

Answer 2

Now i would like to bundle the project, but unsure what is the best bundler to use?

All answers to your questions will be subjective, but it is factual that Webpack offers plugins and configuration settings to suit your needs.

Also i see some posts saying that they split the bundle into multiple files (like app.bundle.js and vendors.bundle.js) and others have 1 large file. What is the best method?

Splitting into multiple files is definitely the most common method. It allows you to keep your application code separated from your dependencies, which makes debugging less of a nightmare.

The part of your Webpack config file that handles this might look something like this:

  // our angular app
  entry: { 'vendor': './src/vendor.ts', 'main': './src/main.ts' },

  // Config for our build files
  output: {
    path: '',
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

Do you need to use a gulp task for all this, or something else completely?

If you use Webpack, then Gulp is not required at all. I'd recommend just using NPM scripts. Don't quote me on this, but I think Webpack can just flat out replace Gulp for Angular2 projects.

Also, how can i minify the HTML templates in an angular2 app?

Webpack has a HTML minify plugin for this.

You can use it like so:

loaders: [
        {
                test: /\.html$/,
                name: "mandrillTemplates",
                loader: 'raw!html-minify' // raw is another loader
        }
    ]