Angular4 和 Webpack - 一个简单的“hello world”应用程序需要 300kb（优化后）？答案

【问题标题】：Angular4 & Webpack - 300kb (after optimization) for a simple "hello world" app?Angular4 和 Webpack - 一个简单的“hello world”应用程序需要 300kb（优化后）？
【发布时间】：2017-12-24 07:03:23
【问题描述】：

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

角度文件：

— 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 { }

打字稿文件

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

网页包文件

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

诊断

之前优化 - 当我在 cmd 中运行>webpack（没有webpack --env.MODE=prod）时，我得到了这个：

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

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

另外 - 源代码浏览器确实显示编译器已消失：

问题

这是我可以为 Hello world 应用程序获得的最小尺寸吗？我读到 uglifyjs 也会摇树。
如何最小化输出文件？对于如此简单的任务，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，所以呢？ ?

【问题讨论】：

欢迎来到现代 Web 开发的精彩世界！
@Dhyey 你读过new AotPlugin 的代码吗？ :-)
@RoyiNamir 您是否使用angular-cli 创建您的项目？
@RoyiNamir 好的。 angular-cli 的结果和不必要的部分比你的优化更大？我的猜测与@AlexanderHiggins 相同：即使对于一个简单的应用程序，您也有大量的库使您的应用程序变得繁重。
@Dhyey 我认为这不是serving files 的问题，而是why a simple app is huge like that 的问题。 Hello World 应用程序以其简单性而闻名，“我们”期望结果是一个小（尺寸）应用程序（这里不是这种情况）。

标签： javascript angular webpack

【解决方案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

【讨论】：

【解决方案2】：

您是否检查过 node_modules 文件夹的大小？这可能包含一些你不需要的东西。

另外，请务必查看此链接：http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/。

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

希望这会有所帮助！

【讨论】：