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

Question

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

Answer 1

사실 이것은 큰 주제이지만, 너무 힘들기 때문에 여기에서는 다루지 않겠습니다. 모든 세부 사항을 이해하려면 Angular만 아는 것만으로는 충분하지 않습니다.

핵심 사항을 요약하기 위해 두 가지 사항을 말씀드리겠습니다.

1. 템플릿 사전 컴파일은 어렵지 않습니다(여기서는 정적 템플릿을 $templateCache，从而在应用加载的时候直接把模版载入内存），但是对 Angular 这样重度依赖数据绑定的框架来说，编译模版那点工作量不值一提。除非说你的项目无比庞大，模版多的管理不过来——但此时更严重的是本地开发时模版预编译的时间损耗——所以把巨型应用模块化分割才是正途；这就有点跑题了。像 ng-repeat 这类的指令会是我们想“减轻浏览器负担”的目标，也就是在浏览器载入之前就把此类指令展开，填充 DOM；而像 ng-if 这类的指令则不能预先处理，因为它们很多时候都依赖“数据绑定”。
   我给你举个例子，比如说页面上有一个部分由 ng-if 控制，根据当前用户是否有权限来判断，但是是否有权限这个状态必须得等用户登录（或者别的预置条件）之后才能获取到——我们要如何在浏览器之外预处理 ng-if？它会涉及到 DOM 操作，它也会影响到浏览器性能，你说是预处理还是不预处理？如果所有这样的标签都要作一番权衡才能决定是否预处理，那这个代价也太大了，不如不用 Angular。Angular 做不到完全的静态化（顺便一提，ESNext 的 Object.observe()에 캐싱하는 것이 솔루션의 핵심이 될 것임을 의미합니다). 반정적 컴파일도 가능하지만 브라우저 성능으로 인해 그렇지 않은 경우가 많습니다.

2. 사실 최신 브라우저의 성능은 매우 강력하다고 믿어야 합니다. 클라이언트 측 렌더링은 많은 사람들이 상상하는 "성능 병목 현상"이 아닙니다. (Angular의 경우) 서버 측 렌더링에 대한 많은 시도는 주로 검색 엔진을 위한 것입니다. 성능 향상보다는 최적화입니다. 연구할 몇 가지 키워드를 알려드리겠습니다. 이것은 배울 수 있는 좋은 기회입니다. (영어 검색 엔진을 사용하면 중국어에는 유용한 결과가 없습니다.)

   • 서버측 렌더링
   • 서버측에서 DOM 렌더링
   • 노드
   • 각도
   • 사전 렌더링
   • 사전 컴파일
   • phantomjs/casperjs
   • 동형 js 라이브러리
     이러한 키워드를 분할하고 결합하여 관련 콘텐츠를 탐색할 수 있습니다. 탐색할 수 있는 다양한 도구/실습/튜토리얼/토론이 있습니다.

요약하자면. 주로 "데이터 바인딩"(예: Angular)을 기반으로 하는 JS 애플리케이션의 경우 현재 언어 및 환경 수준(예: 앞서 언급한 Object.observe() 등)의 지원 부족으로 인해 DOM에서 완전한 사전 컴파일을 달성할 수 없습니다. 또는 정적. 브라우저에 진입하기 전에 DOM의 일부를 다른 방식으로 전처리하는 것이 가능하지만, 애플리케이션의 전반적인 성능 향상이나 브라우저의 성능 향상 및 이러한 전처리를 구현하는 비용에 큰 영향을 미치지는 않습니다. 매우 엄격한 성능을 갖춘 애플리케이션(예: Taobao?)을 만들지 않는 한 이는 여전히 결정 사항입니다.

Answer 2

검색 엔진 최적화 관점에서도 이는 의미가 있습니다. AngularJS에 적합한 기성 도구는 다음과 같습니다

• prerender.io

• angularjs-서버

타오바오의 미드웨이 아일랜드도 비슷한 출발점이 되어야 합니다