Javascript Angular4&；网页包-300kb（优化后）用于简单的；“你好，世界”；应用程序？

我用Angular 4（4.3.0）创建了一个简单的Hello world应用程序

角度文件：

-app.component.ts

-app.component.html

打字脚本文件

网页包文件

但重要的部分是：

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

及

诊断学

优化之前-当我在cmd中运行

>webpack

（不带

webpack--env.MODE=prod

）时，我得到以下结果：

,

现在让我们看看编译器是否存在：

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

另外-源资源管理器确实显示编译器已消失：

问题

这是Hello world应用程序的最小尺寸吗？我读到丑八怪也会摇树。
如何最小化输出文件250K对于这样一个简单的任务来说仍然是巨大的

更新 使用以下配置添加GZIP插件：

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

尺寸为60K app+20K polyfill=80k APPX

---

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

您是否检查了节点模块文件夹的大小？这可能包含一些你不需要的东西

另外，请确保签出此链接：

在这个lik中，他们解释了如何实现更小的应用程序（HelloWorld为55kb）

---

希望这有帮助

我认为你看错了如果你需要一个简单的HelloWorld应用程序，你根本不应该使用框架。 UI框架具有各种各样的“魔力”，能够重用组件和代码，管理您的状态（例如Redux）。。。因此，大约200KB的大型应用程序初始加载似乎是合理的。如果您想减少初始加载，请检查所谓的“渐进加载”——这可以通过网页包插件来实现。
进一步阅读：

---

欢迎来到现代web开发的精彩世界@Dhyey你读了写代码的地方了吗？：-）@RoyiNamir您是否使用

angular cli

创建项目？@RoyiNamir Ok。使用

angularcli

和不必要的部分的结果比您的优化更大？我的猜测与@AlexanderHiggins相同：即使是一个简单的应用程序，你也有大量的库，这让你的应用程序很沉重。@Dhyey我认为这不是

提供文件的问题，而是
为什么一个简单的应用程序如此巨大的问题
Hello World
应用程序以其简单性而闻名，因此“我们”希望得到一个小（大小）的应用程序（这里的情况并非如此）。
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 { }

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

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

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