为什么 Dart Polymer 将主 css 文件内联/硫化成 <head> 标签？答案

【问题标题】：Why Dart Polymer inlines/vulcanize main css file into <head> tag?为什么 Dart Polymer 将主 css 文件内联/硫化成 <head> 标签？
【发布时间】：2015-07-07 02:33:46
【问题描述】：

web/templates/ui-elements.html

<polymer-element name="app-element">
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <div class="classes from main-css file"></div>
    <content></content>
  </template>
  <script type="application/dart" src="ui-elements.dart"></script>
</polymer-element>

<polymer-element name="ui-icon" attributes="name" noscript>
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <span class="fa fa-{{name}}"></span>
  </template>
</polymer-element>

...

web/templates/ui-elements.dart

@CustomTag('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();
}

...

web/main.dart

import 'package:polymer/polymer.dart';

main() {
  initPolymer();
}

@whenPolymerReady
void onReady() {
}

web/main.html（pub build之前的入口文件）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="import" href="templates/ui_elements.html"/>
  </head>
  <body>
    <app-element></app-element>
    <script type="application/dart" src="main.dart"></script>
  </body>
</html>

web/main.html（pub build之后的入口文件）

<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
    ...HERE IS FULL CONTENT OF main.css...
    </style>
</head><body>
...
HERE ARE ELEMENTS THAT ALSO USE main.css, so it's also downloading
<polymer-element name="ui-icon" attributes="name" noscript>
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <span class="fa fa-{{name}}"></span>
  </template>
</polymer-element>
...

 <script src="main.html.polymer.bootstrap.dart.js" async=""></script>
</body></html>

相关问题：

如何避免 main.css 文件的“内联/硫化”内容？
为什么要创建 Polymer 这么大的输出文件：main.html.polymer.bootstrap.dart.js (323kb)、polymer.min.js (121kb)、webcomponents.min.js (103kb)。近期有什么变化吗？
还有一些 Polymer 不会自动包含在编译的main.html 中的文件（请参阅屏幕）：
- main.web_components.bootstrap.dart
- main.dart.js

附加屏幕：

【问题讨论】：

您是否在浏览器开发工具中调查过浏览器实际加载了哪些文件？我从来没有这样做过，但 AFAIK 并不是所有文件都实际加载了。
我已经更新了问题 - 我已经从 devtool 添加了屏幕。
您是在调试模式还是发布模式下构建的？（看起来像释放）。我认为您目前无能为力，但请确保服务器提供这些压缩后的文件，这应该会显着减小大小。我不知道有任何计划的优化（意义不大，但最近没有公告）。我想下一个重要步骤是对 Polymer 0.8 的更新。优化应该主要是 1.0 后的任务。
release 然后，它是控制台上的默认值（debug 会导致更大的输出）。
调试模式会产生未压缩的而非 treeshaken 的输出，这会产生越来越大但可读性更高的文件。顾名思义，这仅用于调试目的。我认为源映射文件也只能在调试模式下创建（我认为可以启用发布）

标签： dart dart-polymer dart-pub

【解决方案1】：

您可以在 pubspec.yaml 文件中的 Polymer 转换器配置中配置此行为，例如

transformers:
- polymer:
    entry_points:
    ... 
    inline_stylesheets:
      web/asset/examples.css: false
      lib/asset/smoothness/jquery-ui-1.8.16.custom.css: false

【讨论】：

拜托，Gunter 你能解释一下为什么pub build 会生成单独的main.dart.js 文件，但是聚合物转换器没有将它包含在main.html 中而是包含main.html.polymer.bootstrap.dart.js（我认为它包含实际main.dart.js。还有未使用的main.web_components.bootstrap.dart - 它需要什么？
抱歉，我对生成的输出文件了解不多。您可以查看pub.dartlang.org/packages/script_inliner。也许它会做你想要的。
Polymer 引导您的原始入口点文件作为转换器过程的一部分，主要是为了删除镜像的使用并用静态代码替换它。
@JakeMacDonald，什么是“删除镜子的使用”？请您详细解释一下好吗？
Polymer 使用反射（镜子）。反射可以防止摇树，因为您可以潜在地访问/调用依赖项中的任何内容。为了解决这个问题，Polymer 使用了在开发过程中使用反射的 Smoke。对于 pub 构建，Smoke 转换器生成无反射代码，因此可以正确应用 tree-shaking。