angular2-cli - Angular 2 css 样式

Question

我正在使用 angular-cli 编写一个 angular2 应用程序。我遵循这样的结构 - 全局样式被导入/放入 styles.scss 中，在 angular-cli.json -> 样式中指定：[] - 每个组件都有自己的 scss 一切正常

但是，有人告诉我，在构建和运行应用程序时，这些样式将转换为内联样式并插入到主 html 文件 (index.html) 的标题中。我在运行应用程序时检查了 index.html 并看到插入了许多内联样式的部分。人们还告诉我解决方案是将所有内容放在一个 css 文件中并在 index.html 中放置一个链接，该大 css 文件将被下载并缓存，这将为用户下次使用提供更快的加载性能但是我很少看到任何使用此解决方案设计的 angular2 应用程序，我认为它背后一定有一个原因，我不知道任何人请给我一个解释

Answer 1

我想这都是关于编译类型的。有 AOT（提前）和 JIT（及时）。我建议你在Angular 2 食谱中阅读它，他们已经很好地描述了它。

实际上只有一个 Angular 编译器。AOT 和 JIT 之间的区别在于时间和工具。使用 AOT，编译器在构建时使用一组库运行一次；使用 JIT，它每次在运行时使用一组不同的库为每个用户运行。

Angular 的创建者建议您在开发中使用 JIT，在生产中使用 AOT。

今天，AOT 编译和 tree shaking 所花费的时间比实际开发要多。这很快就会改变。目前，最好在开发中进行 JIT 编译并在部署到生产之前切换到 AOT 编译。