Contents

dartdevc: The Dart development compiler

The Dart development compiler (dartdevc, also known as DDC) is a Dart-to-JavaScript compiler that’s targeted at web app development in modern browsers.

dartdevc is used by tools such as the webdev tool to allow you to run and debug your Dart web apps in Chrome.

Overview

dartdevc is a Dart-to-JavaScript compiler that’s targeted at web app development in modern browsers.

dartdevc supports incremental compilation and emits modular JavaScript. With a tool like webdev serve that uses dartdevc, you can edit your Dart files, refresh in Chrome, and see your edits almost immediately. This speed is possible because dartdevc compiles only updated modules, not all the packages that your app depends on.

The first compilation with dartdevc takes the longest, because the entire app must be compiled. After that, as long as the serve command keeps running, refresh times with dartdevc are much faster than with dart2js.

Using dartdevc

The webdev and build_runner tools use dartdevc as the default web compiler when serving and testing web apps.

When to use dartdevc

Use dartdevc whenever you’re actively working on your code. Here are some of the advantages of dartdevc over dart2js:

  • Faster refreshing after code changes.
  • Simpler, more readable, more idiomatic JavaScript output containing fewer runtime checks.
  • Integration with Chrome dev tools for easier debugging.

Keep using dart2js to build your deployed, production app. With dart2js you get advanced optimizations such as tree shaking to minimize downloaded code size.

Compatible browsers

Chrome is the only supported browser. You might be able to use other modern browsers (Chromium Edge, Firefox, and Safari).

If you find a bug in dartdevc’s support for Chrome, Edge, Firefox, or Safari, please create an issue.

Common problems

Code passes analysis but fails to compile

Because dartdevc analyzes more code.

The Dart analyzer looks at an individual package’s source code, not the code of any additional packages. In contrast, dartdevc analyzes the whole, generated program; it covers the original source code, plus generated code and all used packages.

First compile takes a long time to run

Because it’s compiling your entire app, including the packages your app depends on.

The first time you build or serve your app, dartdevc compiles every module. Afterward, as long as webdev continues to run, it tracks which Dart files change, and dartdevc recompiles only the modules that are affected by those changes.

Subsequent compilations are taking a long time to run

Are the implementation files for your package under lib/src? If not, dartdevc is probably creating too many modules. For more information, see How the modules are created.

Producing too many JavaScript files

This happens when dartdevc is creating too many modules. Are the implementation files for your package under lib/src? For more information, see How the modules are created.

Doesn’t lazily load deferred libraries

Lazily loading libraries is a production use case, and dartdevc isn’t intended for production code. However, dartdevc validates that when code uses a deferred library, that code first calls loadLibrary().

Modules

JavaScript module overview

When you use dartdevc, modules are an implementation detail.

The dartdevc creates several JavaScript modules, each of which contains code generated from one or more Dart files. When you edit your Dart files, webdev recompiles only the affected modules, instead of your whole app. The result is a much quicker edit-refresh cycle.

By contrast, when you use dart2js, dart2js creates one JavaScript file for the entire app.

If you’d like to know more about JavaScript modules, see Preethi Kasireddy’s beginner’s guide or Addy Osmani’s article on writing modular JavaScript.

How the modules are created

When you use a webdev command with dartdevc, a heuristic that’s based on package structure determines which modules the webdev command creates:

  • One module for each Dart file that’s under lib, but not under lib/src.
    These are the Dart files that are part of the package’s public API, and can be imported by other packages.

  • One module for each Dart file that’s not under lib and that contains a top-level main() function.
    For example, web/main.dart gets its own module.

  • One module for each Dart file that’s not imported by one of the above.

Any Dart file that is imported ends up either directly in the importing file’s module or (if it’s imported more than once) in a shared module.

These rules ensure that no Dart file is compiled into more than one module. Importing only from lib and not lib/src minimizes the amount of code that your app loads.

What kind of modules dartdevc produces

When run with [webdev][], dartdevc generates AMD modules. dartdevc can also generate ES6 (Harmony) and CommonJS (Node) modules, but these options aren’t currently supported by the build_web_compilers package used with the build_runner and [webdev][] tools.

Resources

For more information, see the following: