Tweet
Tweet

Slide 1

Slide 1 text

three.jsファイルサイズ軽量化計画 2020.03.03 three.js Meetup Tokyo #1 by Takumi Hasegawa

Slide 2

Slide 2 text

unshift (アンシフト)という屋号で フリーランスのディベロッパーをやっています。 趣味でクリエイティブコーディングをしたりします。 長谷川 巧 (はせがわ たくみ) Front-end / Creative developer Portfolio: https://unshift.jp/ Twitter: @_unshift

Slide 3

Slide 3 text

昔作ったポートフォリオサイトが three.jsのサイトに載ってます。 (今のはthree.js製じゃない、、、)

Slide 4

Slide 4 text

昔の(私の)three.jsの使い方

Slide 5

Slide 5 text

サイトからダウンロードした three.min.jsをそのまま配置して scriptタグに記述。 (200KB ~ 300KB)

Slide 6

Slide 6 text

最近は、three.jsの膨大な機能も 大して使いこなせないし 必要最低限の機能を実装した オレオレWebGLフレームワークを 使ってました。

Slide 7

Slide 7 text

久々にthree.jsを使おうと思ったら

Slide 8

Slide 8 text

609KB !!!

Slide 9

Slide 9 text

そんな中、 知り合いのスーパーディベロッパー である なかのさん(@misaki_mofujp) のtweetを見て、 three.jsのファイルサイズ軽量化 について調べ始めました。 ※Tree Shakingについては後述

Slide 10

Slide 10 text

three.jsのファイルサイズを減らすには 方法1: カスタムビルド 方法2: Tree Shaking

Slide 11

Slide 11 text

方法1: カスタムビルド three.jsのGitHubリポジトリには ソースからビルドするための環境が入っているので それをカスタマイズして必要な機能のみ入れた カスタム版three.jsをつくる。

Slide 12

Slide 12 text

※Node.jsが必要です。 Node.jsわからんって人はこの機会に 覚えてもいいかもしれません。 インストールする事自体は簡単。 説明は省略します。

Slide 13

Slide 13 text

build/three.js build/three.module.js build/three.min.js が生成される。 ダウンロードしたリポジトリの ディレクトリで $ npm install でモジュールインストールが完了したら $ npm run build-closure するだけ。 ビルド自体は超簡単

Slide 14

Slide 14 text

src/Three.js の「export」から 始まる行の中で、使いたいもの以外を コメントアウト (または削除)。 機能を絞るには そして $ npm build-closure を実行。

Slide 15

Slide 15 text

方法2 (応用編): モジュールバンドラーによる Tree Shaking WebpackやRollupなどのモジュールバンドラーによる Tree shakingによって必要な機能だけに絞る。

Slide 16

Slide 16 text

※Tree Shakingとは ざっくり言うと、 使用していないコード (デッドコード)を 削除してくれる機能のこと。

Slide 17

Slide 17 text

Webpackを例として Tree Shakingするには… 1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く 2. Webpackの設定でmodeを”production”に設定 3. babelやTypescriptの設定に気をつける

Slide 18

Slide 18 text

1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く

Slide 19

Slide 19 text

2. Webpackの設定でmodeを”production”に設定 https://webpack.js.org/configuration/mode/

Slide 20

Slide 20 text

3. babelやTypescriptの設定に気をつける デフォルトの設定だと、ES Module形式で記述しても CommonJSに変換されてしまう。ので、対処する。 ・@babel/preset-envならoptionでmodules: false ・TypescriptならtsconfigでcompilerOptionsの module: “es2015”などに設定

Slide 21

Slide 21 text

準備ができたので早速試してみる。

Slide 22

Slide 22 text

まずは全部入りになる記述 561KB

Slide 23

Slide 23 text

使う機能だけ読み込み 561KB

Slide 24

Slide 24 text

あれ、変わらない、、

Slide 25

Slide 25 text

いろいろ調べた結果、 three.jsは Tree Shakingはできないとのこと。

Slide 26

Slide 26 text

解決策は3つ 1. カスタムビルドしたものを使う 2. モジュールのソースを直接読み込む 3. プラグインを使う

Slide 27

Slide 27 text

1. カスタムビルドしたものを使う

Slide 28

Slide 28 text

2. モジュールのソースを直接読み込む

Slide 29

Slide 29 text

　3. プラグインを使う three-minifierという、 WebpackとRollupで使えるプラグインがある https://github.com/yushijinhun/three-minifier

Slide 30

Slide 30 text

まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。