three.js ファイルサイズ軽量化計画 / threejs file size

three.js ファイルサイズ軽量化計画

Transcript

1. three.jsファイルサイズ軽量化計画 2020.03.03 three.js Meetup Tokyo #1 by Takumi Hasegawa
2. unshift (アンシフト)という屋号で フリーランスのディベロッパーをやっています。 趣味でクリエイティブコーディングをしたりします。 長谷川 巧 (はせがわ たくみ) Front-end / Creative developer Portfolio: https://unshift.jp/ Twitter: @_unshift
3. 昔作ったポートフォリオサイトが three.jsのサイトに載ってます。 (今のはthree.js製じゃない、、、)
4. 昔の(私の)three.jsの使い方
5. サイトからダウンロードした three.min.jsをそのまま配置して scriptタグに記述。 (200KB ~ 300KB)
6. 最近は、three.jsの膨大な機能も 大して使いこなせないし 必要最低限の機能を実装した オレオレWebGLフレームワークを 使ってました。
7. 久々にthree.jsを使おうと思ったら
8. 609KB !!!
9. そんな中、 知り合いのスーパーディベロッパー である なかのさん(@misaki_mofujp) のtweetを見て、 three.jsのファイルサイズ軽量化 について調べ始めました。 ※Tree Shakingについては後述
10. three.jsのファイルサイズを減らすには 方法1: カスタムビルド 方法2: Tree Shaking
11. 方法1: カスタムビルド three.jsのGitHubリポジトリには ソースからビルドするための環境が入っているので それをカスタマイズして必要な機能のみ入れた カスタム版three.jsをつくる。
12. ※Node.jsが必要です。 Node.jsわからんって人はこの機会に 覚えてもいいかもしれません。 インストールする事自体は簡単。 説明は省略します。
13. build/three.js build/three.module.js build/three.min.js が生成される。 ダウンロードしたリポジトリの ディレクトリで $ npm install でモジュールインストールが完了したら $ npm run build-closure するだけ。 ビルド自体は超簡単
14. src/Three.js の「export」から 始まる行の中で、使いたいもの以外を コメントアウト (または削除)。 機能を絞るには そして $ npm build-closure を実行。
15. 方法2 (応用編): モジュールバンドラーによる Tree Shaking WebpackやRollupなどのモジュールバンドラーによる Tree shakingによって必要な機能だけに絞る。
16. ※Tree Shakingとは ざっくり言うと、 使用していないコード (デッドコード)を 削除してくれる機能のこと。
17. Webpackを例として Tree Shakingするには… 1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く 2. Webpackの設定でmodeを”production”に設定 3. babelやTypescriptの設定に気をつける
18. 1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く
19. 2. Webpackの設定でmodeを”production”に設定 https://webpack.js.org/configuration/mode/
20. 3. babelやTypescriptの設定に気をつける デフォルトの設定だと、ES Module形式で記述しても CommonJSに変換されてしまう。ので、対処する。 ・@babel/preset-envならoptionでmodules: false ・TypescriptならtsconfigでcompilerOptionsの module: “es2015”などに設定
21. 準備ができたので早速試してみる。
22. まずは全部入りになる記述 561KB
23. 使う機能だけ読み込み 561KB
24. あれ、変わらない、、
25. いろいろ調べた結果、 three.jsは Tree Shakingはできないとのこと。
26. 解決策は3つ 1. カスタムビルドしたものを使う 2. モジュールのソースを直接読み込む 3. プラグインを使う
27. 1. カスタムビルドしたものを使う
28. 2. モジュールのソースを直接読み込む
29. 　3. プラグインを使う three-minifierという、 WebpackとRollupで使えるプラグインがある https://github.com/yushijinhun/three-minifier
30. まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。