javascript - Angular4 和 Webpack - 300kb(优化后)用于简单的 "hello world"应用程序？

Question

我使用 Angular 4 (4.3.0) 创建了一个简单的 Hello world 应用。

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但重要的部分是:

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

Diagnostics

Before 优化 - 当我在 cmd 中运行 >webpack(没有 webpack --env.MODE=prod)时，我得到这个:

,

现在让我们看看编译器确实存在:

好的，现在让我们运行 >webpack --env.MODE=prod ，我确实看到了更小的文件:

另外 - source explorer 确实显示编译器已消失:

问题

这是我可以为 Hello world 应用程序获得的最小尺寸吗？我读到 uglifyjs 也做 tree shaking。
如何最小化输出文件？ 对于这样一个简单的任务，250K 看起来仍然很大。

更新

添加 GZIP 插件，使用此配置:

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

大小是 60K app + 20K polyfill = 80k apprx。

但我读到一个简单的hello world 应该需要大约 20k，所以？ ？

Answer 1

我觉得你看错了。 如果您需要一个简单的 HelloWorld 应用程序，您根本不应该使用框架。UI 框架使用各种“魔法”来实现组件和代码的重用、管理您的状态(例如 Redux)……等等。因此，大约 200KB 的大型应用程序初始加载似乎是合理的。如果您想减少初始负载，请检查所谓的“渐进式加载”——它可以借助 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