减小/拆分 Flutter 生成的 Web 输出文件的大小"main.dart.js" ？

Question

我刚刚构建了一个例子Flutter应用程序，我想把它部署为一个web应用程序。Flutter生成一个名为main.dart.js的文件。然而，使用一些对话框，动画等，这个js文件已经差不多2MB的大小(使用flutter build web构建)。

现在我已经将它部署在aws-webserver上-但是打开它需要大约5秒才能出现，而屏幕完全空白。这不是一个好的体验:-(

)那么，问题是如何减少/分割生成的main.dart.js的大小，以便web应用程序更快启动?我已经尝试使用Dart延迟加载:

import 'secondpage.dart' deferred as secondpage;
<...>
class MyApp extends StatelessWidget {
final Future<void> loadedLibrary = secondpage.loadLibrary();
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Admin Panel',
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: bgColor,
textTheme: GoogleFonts.poppinsTextTheme(Theme.of(context).textTheme)
.apply(bodyColor: Colors.white),
canvasColor: secondaryColor,
),
navigatorObservers: [TransitionRouteObserver()],
initialRoute: 'login',
onUnknownRoute: (context) => null,
routes: {
'login': (context) => const LoginScreen(),
'admin': (context) =>FutureBuilder(
future: loadedLibrary,
builder: (snapshot, context) {
return secondpage.SecondPage();
})
},
);

这种方法确实会生成第二个js文件main.dart.js_1.part.js。但是这个文件只有1KB大小，而main.dart.js仍然有2MB大小。所以这里没有进步

是否有其他的选择或想法来"改善启动时间"?一个网页应用程序?谢谢!

Answer 1

我知道我迟到了，但是对于那些偶然发现这个问题的人:目前没有官方解决方案的问题，但如果你检查这个GitHub问题讨论，到最后，你会被引导到一个中等的文章。这仅仅是基于使用qlevar_router包的延迟加载思想的一种变通方法。

有关概念验证项目，请查看上述Medium文章作者的GitHub存储库。这是一个简短的节选，以便您了解要点:

class DefferedLoader extends QMiddleware {
final Future<dynamic> Function() loader;
DefferedLoader(this.loader);
@override
Future onEnter() async {
await loader();
}
}
class Routes {
static final routes = <QRoute>[
QRoute(path: '/', builder: () => const MainPage()),
QRoute(
path: '/users',
builder: () => users.UsersPage(),
middleware: [
DefferedLoader(users.loadLibrary),
],
),
QRoute(
path: '/categories',
builder: () => categories.CategorysPage(),
middleware: [
DefferedLoader(categories.loadLibrary),
],
),
];
}

---

2022年9月更新:qlevar_router不是唯一支持延迟加载的包，你也可以使用auto_route.

Answer 2

我同意前面的答案，并在现场分享链接。

然而，作为整体问题的部分解决方案，重要的是检查导入的库如果你需要2MB来加载一个字体，也许你可以找到一个解决办法。

查看main.js本身(包括缩小版和非缩小版，如调试版中的web版本，如果有帮助的话)会有所帮助。在某些情况下，有大量重复的函数可能只是为类似的参数定义包装器。

在我的例子中，避免使用google字体，使用更简单的几乎相等的字体，减少了40%的大小(压缩后加载速度提高了24%)。