anchor.diff:  :marked
     This cookbook describes how to radically improve performance by compiling _Ahead of Time_ (AoT) 
     during a build process.
  +  
  +  这个烹饪指南描述如何通过在构建过程中进行预编译（Ahead of Time - AoT）来从根本上提升性能。
   
   a#toc
   :marked
     ## Table of Contents
  +  ## 目录
     * [Overview](#overview)
  +  * [概览](#overview)
     * [_Ahead-of-Time_ vs _Just-in-Time_](#aot-jit)
  +  * [_预编译_ vs _即时编译_](#aot-jit)
     * [Compile with AoT](#compile)
  +  * [用AoT进行编译](#compile)
     * [Bootstrap](#bootstrap)
  +  * [引导](#bootstrap)
     * [Tree Shaking](#tree-shaking)
  +  * [摇树优化（Tree Shaking）](#tree-shaking)
     * [Load the bundle](#load)
  +  * [加载捆文件](#load)
     * [Serve the app](#serve)
  +  * [启动应用服务器](#serve)
     * [Source Code](#source-code)
  +  * [源码](#source-code)
   
   a#overview
   .l-main-section
   :marked
     ## Overview
  +  ## 概览
     Angular component templates consist of a mix of standard html and Angular syntax (e.g. `ngIf`, `ngFor`). 
     
  +  Angular组件的模板由标准HTML和Angular特有的语法（比如`ngIf`、`ngFor`）组成。
  +  
     Expressions like `ngIf` and `ngFor` are specific to Angular. The browser cannot execute them directly.
  +  
  +  像`ngIf`和`ngFor`这样的表达式是专属于Angular的，浏览器无法直接执行它们。
     
     Before the browser can render the application, Angular components and their templates must be converted to executable JavaScript. 
     We refer to this step as _Angular compilation_ or just plain _compilation_.
  +  
  +  在浏览器渲染该应用之前，Angular组件及其模板必须被转换成可执行的JavaScript。
  +  我们把这一步叫做*Angular编译*或就叫普通的*编译*。
   
     You can compile the app in the browser, at runtime, as the application loads, using the _Just-in-Time_ (JiT) compiler. 
     This is the standard development approach shown throughout the documentation.
  +  
  +  你可以在浏览器中使用*即时编译器*（Just-in-Time - JiT）在运行期间编译该应用，也就是在应用加载时。
  +  这是本文档中展示过的标准开发方式。
   
     JiT compilation incurs a runtime performance penalty. 
     Views take longer to render because of the in-browser compilation step. 
  
positive.code: 
  :marked
    Be sure to recompile with `ngc`!
  
  a#tree-shaking
  :marked
    ## Tree Shaking
  
    AoT compilation sets the stage for further optimization through a process called _Tree Shaking_.
    A Tree Shaker walks the dependency graph, top to bottom, and _shakes out_ unused code like
    dead needles in a Christmas tree.
  
    Tree Shaking can greatly reduce the downloaded size of the application 
    by removing unused portions of both source and library code. 
    In fact, most of the reduction in small apps comes from removing unreferenced Angular features. 
    
    For example, this demo application doesn't use anything from the `@angular/forms` library.
    There is no reason to download Forms-related Angular code and tree shaking ensures that you don't.
  
    Tree Shaking and AoT compilation are separate steps. 
    Tree Shaking can only target JavaScript code. 
    AoT compilation converts more of the application to JavaScript, 
    which in turn makes more of the application "Tree Shakable".
  
    ### Rollup
  
    This cookbook illustrates a Tree Shaking utility called _Rollup_.
  
    Rollup statically analyzes the application by following the trail of `import` and `export` statements.
    It produces a final code _bundle_ that excludes code that is exported, but never imported.
  
    Rollup can only Tree Shake `ES2015` modules which have `import` and `export` statements.
  .l-sub-section
    :marked
      Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules. 
      It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`. 
      What matters is that the code uses ES `import` and `export` statements rather than `require` statements.
  :marked
    Install the Rollup dependencies with this command:
  code-example(format='.').
    npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev
  :marked
    Next, create a configuration file to tell Rollup how to process the application. 
    The configuration file in this cookbook is named `rollup.js` and looks like this.
  
  +makeExample('cb-aot-compiler/ts/rollup.js', null, 'rollup.js')(format='.')
  :marked
    It tells Rollup that the app entry point is `app/main.js` .
    The `dest` attribute tells Rollup to create a bundle called `build.js` in the `dist` folder.
    Then there are plugins.
  
  :marked
    ### Rollup Plugins
  
    Optional plugins filter and transform the Rollup inputs and output.
  
    *RxJS*
    Rollup expects application source code to use `ES2015` modules. 
    Not all external dependencies are published as `ES2015` modules.
    In fact, most are not. Many of them are published as _CommonJS_ modules.
    
    The _RxJs_ observable library is an essential Angular dependency published as an ES5 JavaScript _CommonJS_ module.
  
    Luckily there is a Rollup plugin that modifies _RxJs_ 
    to use the ES `import` and `export` statements that Rollup requires.
    Rollup then preserves in the final bundle the parts of `RxJS` referenced by the application.
  
  +makeExample('cb-aot-compiler/ts/rollup.js','commonjs','rollup.js (CommonJs to ES2015 Plugin)')(format='.')     
  
  :marked
    *Minification* 
  
    Rollup Tree Shaking reduces code size considerably.  Minification makes it smaller still.
    This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code.
  
  +makeExample('cb-aot-compiler/ts/rollup.js','uglify','rollup.js (CommonJs to ES2015 Plugin)')(format='.') 
  
  .l-sub-section
    :marked
      In a production setting, you would also enable gzip on the web server to compress
      the code into an even smaller package going over the wire.
  
  :marked
    ### Run Rollup
    Execute the Rollup process with this command:
  code-example(format='.').
    node_modules/.bin/rollup -c rollup.js
  
  .l-sub-section
    :marked
      Rollup may log many lines with the following warning message:
    code-example(format='.', language='bash').
      The `this` keyword is equivalent to `undefined` at the top level of an ES module, and has been rewritten
    :marked
      You can safely ignore these warnings.
  
  a#load
  .l-main-section
  :marked
    ## Load the Bundle
  
    Loading the generated application bundle does not require a module loader like SystemJS. 
    Remove the scripts that concern SystemJS.
    Instead, load the bundle file using a single `script` tag:
  
  +makeExample('cb-aot-compiler/ts/index.html','bundle','index.html (load bundle)')(format='.') 
  
  
negative.code: .l-main-section
  :marked
    ## Serve the app
    
    ## 启动应用服务器
  
    You'll need a web server to host the application.
    Use the same _Lite Server_ employed elsewhere in the documentation:
    
    你需要一个Web服务器来作为应用的宿主。
    像与文档中其它部分一样，用*Lite Server*吧：
    
  code-example(format='.').
    npm run lite
  :marked
    The server starts, launches a browser, and the app should appear.
  
    启动了服务器、打开浏览器，应用就出现了。
    
  a#source-code
  .l-main-section
  :marked
    ## Source Code
    
    ## 源代码
  
    Here is the pertinent AoT source code for this cookbook:
    
    下面是与本烹饪宝典有关的AoT源码：
    
  +makeTabs(
    `cb-aot-compiler/ts/app/app.component.html,
     cb-aot-compiler/ts/app/app.component.ts,
  