script_inliner 0.0.3+1 script_inliner: ^0.0.3+1 copied to clipboard
A transformer to inline script content during a build.
Script Inliner #
A transformer for pub.
Speed up your app's initial load #
What if you could give 90ms back to your app's users?
Dart apps require a dart.js file, which helps decide if the original Dart code, or the generated JavaScript code, should be loaded by the browser.
The browser must fetch dart.js before it can fetch the application logic. This causes unnecessary startup delay for your users.
Prereq #
To get the most benefit from this transformer, you should put the script tags before the CSS link tag. Browsers can pause script execution until CSS files are loaded, unless the script tag is before the CSS tag.
Before you begin, ensure the <head>
looks something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<script async type="application/dart" src="test.dart"></script>
<script async src="packages/browser/dart.js"></script>
</head>
How it works #
This small transformer inlines script contents, ensuring the dart.js file is included in the initial HTML download. No more resource fetch just to get the app!
Configuring #
Add the transformer to your pubspec.yaml:
transformers:
- script_inliner
(Assuming you already added this package to your pubspec.yaml file.)
Usage #
Add a data-pub-inline
attribute to the script tag. Here is an example:
<script async data-pub-inline src="packages/browser/dart.js"></script>
Run pub build
to build the application, or pub serve
to run a development
server. In both cases, pub
will inline the dart.js file:
<script data-pub-inline="packages/browser/dart.js">
// Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
(function() {
// Bootstrap support for Dart scripts on the page as this script.
if (navigator.userAgent.indexOf('(Dart)') === -1) {
// TODO:
...
...
Known issues #
I've tested only with dart.js and a CSS file. Please let me know how it works for you!
Bugs/requests #
Please report bugs and feature requests.