Flutter의 코드 스플리팅(Code Splitting) 방법

Flutter의 코드 스플리팅(Code Splitting) 방법

Flutter 프로젝트가 커질수록 코드의 양이 증가하고, 앱의 빌드 및 로딩 속도가 느려질 수 있습니다. 이를 해결하기 위한 기법이 코드 스플리팅(Code Splitting)입니다.

Flutter에서 코드 스플리팅을 적용하면 앱의 초기 로딩 속도를 개선하고, 불필요한 코드 로드를 방지할 수 있습니다.

이 글에서는 Flutter에서 코드 스플리팅을 적용하는 방법을 설명하고, 성능 최적화를 위한 핵심 기법을 소개하겠습니다.

---

1. 코드 스플리팅이란?

코드 스플리팅(Code Splitting)은 앱을 작은 모듈로 나누어 필요할 때만 로드하는 기법입니다. 이를 통해 앱의 초기 로딩 속도를 개선하고, 메모리 사용량을 줄일 수 있습니다.

코드 스플리팅을 적용하면 다음과 같은 효과를 얻을 수 있습니다.

• 초기 앱 로딩 속도 개선: 필요한 코드만 로드하여 빠르게 실행
• 메모리 사용 최적화: 불필요한 코드 로딩 방지
• 앱 유지보수 용이: 모듈화된 코드 구조 유지

이제 Flutter에서 코드 스플리팅을 적용하는 다양한 방법을 살펴보겠습니다.

---

2. 코드 스플리팅을 적용하는 방법

(1) 폴더 구조를 활용한 코드 분리

Flutter 프로젝트에서는 주요 기능별로 폴더를 나누어 모듈화할 수 있습니다.

lib/
 ├── main.dart
 ├── pages/
 │   ├── home_page.dart
 │   ├── settings_page.dart
 │   ├── profile_page.dart
 ├── widgets/
 │   ├── custom_button.dart
 │   ├── custom_card.dart
 ├── services/
 │   ├── api_service.dart
 │   ├── auth_service.dart

이렇게 파일을 분리하면 각 기능을 독립적으로 관리할 수 있으며, 특정 파일을 필요한 시점에만 로드할 수 있습니다.

---

(2) Flutter의 deferred import를 활용한 코드 스플리팅

Flutter에서는 deferred import를 사용하여 특정 모듈을 동적으로 로드할 수 있습니다. 이를 통해 앱 크기를 줄이고, 필요한 시점에만 코드를 불러올 수 있습니다.

📌 사용 방법

import 'package:flutter/material.dart';
import 'dart:async';

// 'profile_page.dart' 파일을 지연 로딩
import 'pages/profile_page.dart' deferred as profile;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  Future loadProfilePage(BuildContext context) async {
    await profile.loadLibrary(); // 동적 로드
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => profile.ProfilePage()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter 코드 스플리팅 예제")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => loadProfilePage(context),
          child: Text("프로필 페이지 로드"),
        ),
      ),
    );
  }
}

위 코드에서는 deferred import를 사용하여 profile_page.dart를 초기 로딩 시 포함하지 않고, 사용자가 버튼을 클릭했을 때만 동적으로 로드합니다.

---

(3) 라우트를 활용한 코드 스플리팅

Flutter의 라우트 시스템을 사용하여 페이지 로드를 지연시킬 수도 있습니다.

📌 사용 방법

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '코드 스플리팅 예제',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
      },
      onGenerateRoute: (settings) {
        if (settings.name == '/profile') {
          return MaterialPageRoute(
            builder: (context) => FutureBuilder(
              future: _loadProfilePage(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return ProfilePage();
                } else {
                  return Scaffold(body: Center(child: CircularProgressIndicator()));
                }
              },
            ),
          );
        }
        return null;
      },
    );
  }

  Future _loadProfilePage() async {
    await Future.delayed(Duration(seconds: 2)); // 예제용 지연 로딩
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("홈 페이지")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/profile');
          },
          child: Text("프로필 페이지 로드"),
        ),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("프로필 페이지")),
      body: Center(child: Text("프로필 페이지 내용")),
    );
  }
}

위 코드는 onGenerateRoute를 사용하여 프로필 페이지를 지연 로드하도록 구현한 예제입니다.

---

4. 코드 스플리팅 적용 후 성능 확인

코드 스플리팅이 잘 적용되었는지 확인하려면 다음 명령어를 실행하여 앱 크기를 분석할 수 있습니다.

flutter build apk --analyze-size

또한, flutter build apk --release를 실행하여 최적화된 릴리즈 빌드를 확인할 수 있습니다.

---

결론

Flutter에서 코드 스플리팅을 적용하면 앱의 성능을 크게 향상시킬 수 있습니다. 주요 방법은 다음과 같습니다.

• 폴더 구조 정리: 기능별로 코드를 분리
• deferred import 사용: 필요할 때만 특정 코드 로드
• 라우트를 활용한 지연 로딩: 필요할 때만 페이지 로드

이제 코드 스플리팅을 활용하여 가볍고 빠른 Flutter 앱을 개발해 보세요!