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.

iroid/script_inliner