Angular4 & Webpack - 300kb (after optimization) for a simple "hello world" app?

Question

I have created a simple Hello world app using Angular 4 (4.3.0).

Angular files :

— app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myTitle:string;
   constructor() {
    this.myTitle = `Hello world`;
  }
}

— app.component.html

<h1>
 {{myTitle}}
</h1>

— app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

TypeScript file

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",

    "module": "es6",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "include": [

      "./**/*"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  } ,
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

Webpack file

Here is the full file but the important parts are :

  config.module.rules.push(
      { test: /\.ts$/, loaders: ['@ngtools/webpack'] }
    );

And

 if (envOptions.MODE === 'prod') {

    config.module.rules.push(
      { test: /\.ts$/, loaders: ['@ngtools/webpack'] }
    );

    config.plugins = [
      new AotPlugin({
        tsConfigPath: './tsconfig.json',
        entryModule: __dirname + '/src/app/app.module#AppModule'
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: false,
        beautify: false,
        mangle: {
          screw_ie8: true,
          keep_fnames: true
        },
        compress: {
          warnings: false,
          screw_ie8: true
        },
        comments: false
      }),
    ];
  }

Diagnostics

Before optimization - When I run >webpack (without webpack --env.MODE=prod) in cmd , I get this :

,

Now let's see that the compiler DOES exist:

Ok now let's run >webpack --env.MODE=prod , and I do see smaller files :

Also - source explorer DOES show that compiler is gone :

Question

Is that the minimum size I can get for an Hello world app ? I read that uglifyjs also does tree shaking.
How can I minimize the output files ? 250K still looks huge for such a simple task.

update

Adding GZIP plugin , using this configuration :

new CompressionPlugin({
      asset: "[path].gz[query]",
     algorithm: "gzip",
     test: /\.js$|\.css$|\.html$/,
     threshold: 10240,
     minRatio: 0.8
 })

The size is 60K app + 20K polyfill = 80k apprx.

But I've read that a simple hello world should take about 20k so ? ?

Answer 1

I think you're looking at it wrong. If you need a simple HelloWorld application you shouldn't be using a framework at all. UI frameworks do all kinds of "magic" to enable reuse of components & code, manage your state (Redux for example) ... etc. Thus, around 200KB initial loading of a large application seems reasonable. If you want to cut down the initial load, check what's called "progressive loading" - it can be achieved with the help of Webpack plugins.
Further reading:
https://blog.lavrton.com/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6 https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2