如何在发布模式下拆分flutter web中的代码？答案

【问题标题】：How to split code in flutter web in release mode?如何在发布模式下拆分flutter web中的代码？
【发布时间】：2020-05-03 23:45:17
【问题描述】：

我正在开发一个使用 Flutter web 的项目，随着我添加正常的功能，js 的大小正在增加。我正在查看 Flutter 的延迟导入，并尝试了将文件拆分为的位置

我运行 flutter run -d chrome 运行良好，因为我知道 deferred 在调试构建中被忽略，当我使用 http-server npm 包运行时，即使查看网络请求，它也没有任何内容，它正在请求部分文件，但没有任何内容显示在屏幕上，甚至在控制台中没有错误。我知道 Flutter Web 最近进入测试版，所以可能会有优化，比如特别减小 main.dart.js 的大小，但这应该根据 doc 起作用。

代码

main.dart.js

import 'package:flutter/material.dart';
import 'package:split_test/page1.dart' deferred as page1;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: page1.Page1(),
        ),
      ),
    );
  }
}

page1.dart

import 'package:flutter/material.dart';
import 'package:split_test/page2.dart' deferred as pag2;

class Page1 extends StatelessWidget {
  const Page1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          children: <Widget>[
            Text('Page1'),
            GestureDetector(
              onTap: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => pag2.Page2(),
                ),
              ),
              child: Text('Go to page 2'),
            )
          ],
        ),
      ),
    );
  }
}

page2.dart.js

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  const Page2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Text('Page2'),
              GestureDetector(
                onTap: () => Navigator.pop(context),
                child: Text('<- Back'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

感谢您的帮助。我在看这个issue。

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

你可以使用 Dart 的延迟导入来做类似的事情。

同样对于颤振，在这个问题中关于此问题的重要讨论是关于为颤动网络提供适当的代码拆分支持：https://github.com/flutter/flutter/issues/50196

【讨论】：