angular.js - angular有没有可以本地构建静态代码的工具

Question

由于angular中使用了大量自定义标签，所有会在浏览器端做很多的计算工作，有没有一种工具可以将这件事情在发布前先编译好，这样就可以避免大部分浏览器的计算工作，有这样的工具吗？

Answer 1

実際、これは大きなトピックですが、面倒なのでここでは触れません。詳細をすべて理解するには、Angular を知っているだけでは十分ではありません。

重要なポイントを要約すると、次の 2 つのポイントを言います:

1. テンプレートの事前コンパイルは難しくありません (ここでは、静的テンプレートを $templateCache，从而在应用加载的时候直接把模版载入内存），但是对 Angular 这样重度依赖数据绑定的框架来说，编译模版那点工作量不值一提。除非说你的项目无比庞大，模版多的管理不过来——但此时更严重的是本地开发时模版预编译的时间损耗——所以把巨型应用模块化分割才是正途；这就有点跑题了。像 ng-repeat 这类的指令会是我们想“减轻浏览器负担”的目标，也就是在浏览器载入之前就把此类指令展开，填充 DOM；而像 ng-if 这类的指令则不能预先处理，因为它们很多时候都依赖“数据绑定”。
   我给你举个例子，比如说页面上有一个部分由 ng-if 控制，根据当前用户是否有权限来判断，但是是否有权限这个状态必须得等用户登录（或者别的预置条件）之后才能获取到——我们要如何在浏览器之外预处理 ng-if？它会涉及到 DOM 操作，它也会影响到浏览器性能，你说是预处理还是不预处理？如果所有这样的标签都要作一番权衡才能决定是否预处理，那这个代价也太大了，不如不用 Angular。Angular 做不到完全的静态化（顺便一提，ESNext 的 Object.observe() にキャッシュすることが解決策の鍵となることを意味します)、半静的も可能ですが、多くの場合、ブラウザのパフォーマンスが原因でそうではありません。

2. 実際、最新のブラウザのパフォーマンスは非常に強力であると信じなければなりません。多くの人が想像するような「パフォーマンスのボトルネック」はクライアント側のレンダリングではありません。(Angular の場合) サーバー側のレンダリングの多くの試みは主に検索エンジン向けです。パフォーマンスの向上ではなく、最適化です。いくつかのキーワードを調べてみましょう。これは学ぶ良い機会です (英語の検索エンジンを使用してください。中国語では有用な結果はありません):

   • サーバーサイドレンダリング
   • サーバー側で dom をレンダリングする
   • ノード
   • 角張った
   • プリレンダリング
   • プリコンパイル
   • ファントムjs/casperjs
   • 同形jsライブラリ
     これらのキーワードを分割したり組み合わせたりして、関連するコンテンツを探索できます。探索できるツール、実践方法、チュートリアル、ディスカッションが多数あります。

要約すると。主に「データ バインディング」に基づいた JS アプリケーション (Angular など) の場合、言語および環境レベル (前述の Object.observe() など) でのサポートが現在不足しているため、DOM で完全なプリコンパイルを実現できません。または静的なレベル。ブラウザに入る前に他の方法で DOM の一部を前処理することは可能ですが、アプリケーションの全体的なパフォーマンスの向上やブラウザのパフォーマンスの向上、およびこれらの前処理の実装コストには大きな影響はありません。非常にパフォーマンスが重要なアプリケーション (淘宝網など) を作成している場合を除き、それ自体は決して小さくはありませんが、それでも裁量の問題です。

Answer 2

検索エンジン最適化の観点からも、これは理にかなっています。 AngularJS に適した既製のツールには以下が含まれます

• prerender.io

• angularjsサーバー

淘宝網のミッドウェー島も同様の出発点になるはずです