Angular4 & Webpack - 300kb (после оптимизации) для простого приложения "привет мир"?

Я создал простое приложение Hello world с помощью Angular 4 (4.3.0).

Angular файлы:

- 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 файл

{
  "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

Вот полный файл, но важными частями являются:

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

И

 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
      }),
    ];
  }

Диагностика

Оптимизация. Когда я запускаю >webpack (без webpack --env.MODE=prod) в cmd, я получаю следующее:

,

Теперь посмотрим, что существует компилятор:

Теперь давайте запустим >webpack --env.MODE=prod, и я вижу файлы меньшего размера:

Также - источник-исследователь DOES показывает, что компилятор ушел:

Вопрос

Это минимальный размер, который я могу получить для приложения Hello world? Я читал, что uglifyjs также трясет дерево.
Как я могу свести к минимуму выходные файлы? 250K по-прежнему выглядит огромным для такой простой задачи.

Обновление

Добавление плагина GZIP с использованием этой конфигурации:

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

Размер составляет 60 тыс. приложений + 20 тыс. polyfill= 80 тыс. ок.

Но я читал, что простой мир привет должен взять около 20 тыс. так?

Ответы

Ответ 1

Я думаю, вы смотрите на это неправильно. Если вам нужно простое приложение HelloWorld, вы не должны использовать фреймворк вообще. Интерфейсы пользовательского интерфейса делают все виды "магии", чтобы использовать повторное использование компонентов и кода, управлять своим состоянием (например, Redux)... и т.д. Таким образом, примерно 200 КБ начальной загрузки большого приложения представляется разумным. Если вы хотите сократить начальную нагрузку, проверьте, что называется "прогрессивная загрузка" - ее можно достичь с помощью плагинов Webpack.
Дальнейшее чтение:
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

Ответ 2

Вы проверили размер вашей папки node_modules? Это может содержать некоторые вещи, которые вам не нужны.

Также не забудьте проверить эту ссылку: http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/.

В этом случае они объясняют, как вы можете достичь приложения меньшего размера (55 КБ для HelloWorld).

Надеюсь, это поможет!