script_inliner 1.0.0

  • Readme
  • Changelog
  • Installing
  • 8

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:

  <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>

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:

- 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.

1.0.0 #

  • Formally bumping this package to 1.0.

0.0.3 #

  • Bump backback dep to 0.15

0.0.2 #

  • Respond to code review.
  • Added tips to README.
  • Move script tags to head, before CSS.
  • Rename the transformer file.

0.0.1 #

  • Initial release.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  script_inliner: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:script_inliner/script_inliner.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see