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
1.7k

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

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

Avatar for Takumi Hasegawa (unshift)

Takumi Hasegawa (unshift)

March 03, 2020
Tweet

More Decks by Takumi Hasegawa (unshift)

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

Other Decks in Technology

See All in Technology
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
Avatar for Logy nologyance
1
370
【初心者向け】ローカルLLMの色々な動かし方まとめ
Avatar for Aratako aratako
7
3.4k
5年目から始める Vue3 サイト改善 #frontendo
Avatar for Kihara, Takuya tacck
PRO
3
210
Skrub: machine-learning with dataframes
Avatar for Gael Varoquaux gaelvaroquaux
0
120
AIのグローバルトレンド2025 #scrummikawa / global ai trend
Avatar for kyonmm kyonmm
PRO
1
260
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
Avatar for yud0uhu yud0uhu
0
230
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
Avatar for yhana yhana
3
540
RSCの時代にReactとフレームワークの境界を探る
Avatar for uhyo uhyo
10
3.3k
研究開発と製品開発、両利きのロボティクス
Avatar for Yutaka Kondo youtalk
1
510
react-callを使ってダイヤログをいろんなとこで再利用しよう！
Avatar for shinaps shinaps
1
230
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
Avatar for Kento Kimura aoto
PRO
0
340
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
120

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
It's Worth the Effort
Avatar for 3n 3n
187
28k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k

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