减少/分割 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 大小。所以这里没有任何改进。

还有其他选项或想法可以“缩短 Flutter Web 应用程序的启动时间”吗？谢谢！

Answer 1

我知道我迟到了，但对于任何偶然发现这个问题的人来说：目前还没有解决该问题的官方解决方案，但如果你检查这个GitHub 问题讨论，到最后，你将被引导到一篇Medium 文章。这只是一种基于使用包延迟加载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.