Dart提供了dart2js和dartdevc两种编译工具,分别用于生产环境和开发环境。 dart2js dart2js是一个强大的工具,它可以将Dart代码编译成高效的、压缩的、部署就绪的JavaScript代码。 通常我们在准备部署我们的Dart web应用到生产环境时使用dart2js。 下面是一个使用dart2js的例子: dart2js -O2 -o main.dart.js main.dart 这个命令会将main.dart编译成main.dart.js,并且使用了-O2优化选项。 相比于dart2js,dartdevc生成的JavaScript代码更易于调试,但是不如dart2js生成的代码运行效率高。
默认情况下, 命令使用dart2js和Angular transformer生成实现应用程序的JavaScript文件. 使用dart2js 标记生成更好的JavaScript Google的应用程序通常使用如下dart2js 选项: --trust-type-annotations --trust-primitives 如果某条代码路径没有经过测试, 应用程序能在dartdevc下运行,使用dart2js编译时出现不正确的行为. 在应用程序的pubspec文件中可以使用$dart2js转换器指定dart2js选项 , 在pubspec文件中哪一个是最后一个转换器: transformers: - ...all other transformers ] 更多信息, 查看dart2js size和speed选项和configuring the dart2js transformer for pub上的文档.
1、dart2js 编译器 我们在调用 flutter run build 命令后会将项目的 main.dart 传入编译流程,最终输出的是构建产物中的 .dill 文件 。 dart2js 编译流程: dart2js 调用的快照文件示例图: 如何生成 web 端代码 具体执行看这里:https://dart.dev/tools/dart2js 我们再来看下 build 生成的 html 如下: Flutter 总结展望 dart2js 和 dartdevc 本质上是一件事情,但这两种编译器是应用在不同场景。 在构建要部署的应用程序时,选用 dart2js,它使用摇树等技术来生成优化的且精简的代码。 dart2js 提供了更快的编译时间,并且编译后的运行效果与之前相比更加一致、完整,更重要的是,输出的代码更加整洁。Dart 团队正在努力使 dart2js 编译后的代码比手写 JS 更快地运行。
二、构建区别 通过资料可以发现,Flutter Web 在不同编译期间会使用 dartdevc 和 dart2js 两个不同的编译器,而如下图所示,默认 debug 运行到 chrome 时采用的是 而 Flutter Web 在 release 编译时,如下图所示,会经过 flutter_tools 的 web.dart 内的对应配置逻辑进行打包,使用的是 dart2js 的命令,打包后会在 而打开 web.dart 文件可以看到很多可配置参数,其中关键的比如: --no-source-maps : 是否需要生成 source-maps ; -O4 :代表着优化等级,默认就是 -O4,dart2js image-20220325182649022 三、最后 虽然这个问题不难解决,但是通过这个问题去了解 dart2js 的编译和构建过程,可以看到很多平时不会接触的内容,不过现在我还是不是特别确定是我写法有问题 ,还是有官方的 dart2js 有 bug 。
二、构建区别 通过资料可以发现,Flutter Web 在不同编译期间会使用 dartdevc 和 dart2js 两个不同的编译器,而如下图所示,默认 debug 运行到 chrome 时采用的是 dartdevc 而 Flutter Web 在 release 编译时,如下图所示,会经过 flutter_tools 的 web.dart 内的对应配置逻辑进行打包,使用的是 dart2js 的命令,打包后会在 build 而打开 web.dart 文件可以看到很多可配置参数,其中关键的比如: --no-source-maps : 是否需要生成 source-maps ; -O4 :代表着优化等级,默认就是 -O4,dart2js 那到这里问题基本就很清楚了,前面的代码写法在当前(2.10.3)的 Flutter Web 上,经过 dart2js 的 release 编译后会出现某些时序不一致的问题,知道了问题也很好解决,如下代码所示 三、最后 虽然这个问题不难解决,但是通过这个问题去了解 dart2js 的编译和构建过程,可以看到很多平时不会接触的内容 最后 如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star:http
---- 三、Flutter for Web的编译器 (1)适用于生产(部署)环境的JavaScript编译器:dart2js dart2js: 为了部署环境而生成优化的精简的代码。 使用dart2js工具将Dart代码编译为可部署的JavaScript。 (2)适用于开发(测试)环境的JavaScript编译器:dartdevc dartdevc: 它提供渐进式编译和热启动。
是提供服务的端口. dart的webdev提供外部访问: webdev serve --hostname 9.104.15.59 -r 这里9.104.15.59是服务器实际ip, -r代表release使用dart2js
该库依赖于平台,因此它具有dart2js和Dart VM的实现。 两者都在开发中,可能还不支持所有操作。 Classes ClassMirror ClassMirror反映了Dart语言类。.
编程语言并不是孤立存在的,Dart也是这样,他由语言规范、虚拟机、类库和工具等组成: SDK:SDK 包含 Dart VM、dart2js、Pub、库和工具。 Dart2js:将 Dart 代码编译为 JavaScript 的工具。 Dart Editor:基于 Eclipse 的全功能 IDE,并包含以上所有工具。
flutter packages\pub get安装依赖 dart 新建dart项目,dart create,dart pub(类似npm的包管理库) put get 安装依赖包,添加到.packages文件 dart2js
SendPort实例,比如ReceivePort().sendPort ③ 包含①和②的list和map,也可以嵌套 ④ 在DartVM中,处于同一进程的2个Isolate,也可以发送自定义的Class实例对象,但dart2js
图四 Flutter For Web 在Flutter For Web的实际的开发和绘制流程中,首先开发者使用Dart语言进行开发,开发完毕在编译的过程中会通过dart2js的库,将dart实现的代码转换成对应的 图五 Flutter For Web的渲染流程 但是由于很多复杂的组件在dart2js的转换过程中难以使用HTML+CSS进行绘制,因此会导致很多组件最终是直接通过Canvas绘制的,同时这也会导致使用
SendPort实例,比如ReceivePort().sendPort ③ 包含①和②的list和map,也可以嵌套 ④ 在DartVM中,处于同一进程的2个Isolate,也可以发送自定义的Class实例对象,但dart2js
例如去支持生成 Flutter 空安全语法: 也做了不少增强性工作,原因是这两点: 经过验证,虽然 Flutter 调用 JS 没问题,但 JS 对象返回后在 Flutter 上无法被解析,而且在 dart2js
编程语言并不是孤立存在的,Dart也是这样,他由语言规范、虚拟机、类库和工具等组成: SDK:SDK 包含 Dart VM、dart2js、Pub、库和工具。 Dart2js:将 Dart 代码编译为 JavaScript 的工具。 Dart Editor:基于Eclipse 的全功能 IDE,并包含以上所有工具。
所以源代码要先经过通用前端CFE处理成Kernel AST,而CFE是用Dart写的,可以给VM/dart2js/Dart Dev Compiler这些不同的Dart工具使用。 [snapshot-with-code] 运行 AppJIT snapshots AppJIT snapshot可以减少大型Dart应用(比如:dartanalyzer 或者 dart2js)的JIT预热时间
运行时:AOT 编译器,如 dart2native,dart2js。 ? JIT 编译器的目的很单纯,把你刚刚撰写的代码尽快编译成目标平台的代码。 比如同样是「编译成 js」,在开发时 dartdevc 会把每个 dart 文件单独翻译成 javascript,这样代码体积很大,且不够优化;而运行时 dart2js 会把当前项目的所有依赖一起编译,
flutter 作为一个UI 框架,与平台无关,在web上利用的是dart2js的能力。 flutter_web 中 UI 层面与渲染逻辑和 Flutter 几乎没有什么区别,底层的一些区别如: flutter_web 中的 Canvas 是 EngineCanvas 抽象,内部会借助 dart2js
相反,当你准备为web创建一个生产应用时,使用dart2js,Dart的高度优化的生产JavaScript编译器,将Flutter核心和框架与你的应用一起打包成一个最小化的源文件,可以部署到任何web服务器
使您可以编写看起来类似于同步代码的异步代码 可以使用 Future API 或 async/await 关键字处理 Future 结果 可以使用 Stream API 或 await for 处理 Stream 结果 仅 dart2js