为什么 Dart Polymer inlines/vulcanize main css 文件进入 <head> 标签?
Why Dart Polymer inlines/vulcanize main css file into <head> tag?
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 文件的 "inlining/vulcanazing" 内容?
- 为什么要创建 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
附加屏幕:
您可以在 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
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 文件的 "inlining/vulcanazing" 内容?
- 为什么要创建 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
附加屏幕:
您可以在 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