Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Takumi Hasegawa (unshift) Takumi Hasegawa (unshift)
March 03, 2020
Technology
1.8k
1

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

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

Avatar for Takumi Hasegawa (unshift)

Takumi Hasegawa (unshift)

March 03, 2020

More Decks by Takumi Hasegawa (unshift)

See All by Takumi Hasegawa (unshift)
DIST.42 「クリエイティブコーディングはWebサイトのどこに活きるのか」
Avatar for Takumi Hasegawa (unshift) unshift
1
2.9k
CASE STUDY #3
Avatar for Takumi Hasegawa (unshift) unshift
2
650

Other Decks in Technology

See All in Technology
Unlocking the Apps
Avatar for Tim Perry pimterry
0
170
実装は速くなった、レビューはどうする？ ― 自身のレビューをAIで再現させるサーヴァントエンジニアリングのすゝめ / Implementation got faster. So what about reviews? — An invitation to Servant Engineering: Recreating your own code reviews with AI
Avatar for nrs nrslib
6
2.7k
MIERUNE JCT 発表資料「宇宙から伊能忠敬ごっこ」
Avatar for じゃらしまる syuchimu
0
100
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
1.8k
脅威をエンジニアリングの糧にして：恐怖を乗り越えた先にあったもの / Turn threats into fuel for engineering: what lay beyond overcoming fear
Avatar for nrs nrslib
1
380
個人最適 から 全体最適 へ　AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
Avatar for ふくだ（fukuda ryu） rfdnxbro
0
820
AIガバナンス実践 - 生成AIコネクタのデータ漏洩リスクと実務対策
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
170
GoとSIMDとWasmの今。
Avatar for asuka askua
3
470
AI駆動開発でなんでもハンズオン環境をつくってみた
Avatar for yoshimi0227 yoshimi0227
0
200
JEP 522 Deep Dive - G1 GC同期コスト削減によるスループット向上を徹底検証&解説
Avatar for Daishi Tabata tabatad
1
660
React、まだ楽しくて草
Avatar for uhyo uhyo
7
3.9k
Agentic ERPをどう設計するか ー 受発注エージェントを動かす、現場の知見と設計思想ー
Avatar for 株式会社リチェルカ recerqainc
1
840

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Done Done
Avatar for chrislema chrislema
186
16k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1.1k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
300
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.5k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
71
39k

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. まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。