LoginSignup
2

More than 5 years have passed since last update.

Angular & GAE 環境で AoT を試してみる

Posted at

はじめに

  • 前回に引き続いて Angular で GAE な環境で Angular のチュートリアルにある Ahead-of-Time Compilation を試してみた
  • たぶん事前にコンパイルしておけば逐次コンパイルするよりも高速になるみたいなことか
  • 前回のものですでにビルドしたものを使って起動するところまでやっていた
  • 普通にビルドする場合と比べてツリーシェイキング(使っていないコードをビルドしない処理のこと)している分だけ違いが出るかもしれない

AoT 用のコンパイラをインストール

npm install @angular/compiler-cli @angular/platform-server --save

AoT 用のコンパイラ設定ファイルを作成

  • チュートリアルに記載の内容と異なり files のファイルを src/main.ts から src/main-aot.ts に変更している
tsconfig-aot.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },

  "files": [
    "src/app/app.module.ts",
    "src/main-aot.ts"
  ],

  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

AoT 用のコンパイラを実行

node_modules/.bin/ngc -p tsconfig-aot.json

AoT 用の起動スクリプトの作成

main-aot.ts
import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

console.log('Running AOT compiled');
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

ツリーシェイキングする(未使用コードを削除してアプリサイズを圧縮する)

  • rollup コマンドを使ってツリーシェイキングする

インストール

npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev

設定ファイルの用意

  • チュートリアルに記載の内容と異なり entry 要素を main.ts から main-aot.ts に変更
rollup-config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify';

export default {
  entry: 'src/main-aot.js',
  dest: 'src/build.js', // output a single application bundle
  sourceMap: false,
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings

    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      uglify()
  ]
};

rollup の実行

node_modules/.bin/ngc -p tsconfig-aot.json
node_modules/.bin/rollup -c rollup-config.js

AoT 用の index.html の作成

index-aot.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularGaeApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
  <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
</head>
<body>
<app-root></app-root>
</body>
<script src="build.js"></script>
</html>

実行ファイルを GAE の実行環境にコピーする

rm -rf gae/dist/*
cp src/index-aot.html gae/dist/index.html
cp src/build.js gae/dist
cp src/favicon.ico gae/dist

AppEngine の開発サーバーで動作確認

実行

cd gae
goapp serve

結果

  • 起動時間は普通に ng build --prod したバージョンとそんなに変わらない
  • ファイルサイズは若干小さくなった
    • もっと大きいプロジェクトになったら違いが出てくるのかもしれない

おわりに

  • そもそも計測しないで最適化しているので AoT のうまみがよくわからなかったのはよくなかった
  • とりあえず記録として記事自体は置いておく

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2