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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
プラットフォームエンジニア ワークショップ/ platform-workshop
Avatar for Databricks Japan databricksjapan
0
170
Generative UI × A2UI で AI エージェントを作った話　AI-DLC も使ってみた！
Avatar for たけのこ kmiya84377
1
310
実装は速くなった、レビューはどうする？ ― 自身のレビューを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.6k
Diagnosing performance problems without the guesswork
Avatar for Elena Tanasoiu elenatanasoiu
0
150
GoとSIMDとWasmの今。
Avatar for asuka askua
3
470
個人最適 から 全体最適 へ　AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
Avatar for ふくだ（fukuda ryu） rfdnxbro
0
800
美味しいスイスチーズを作ろう🧀🐭
Avatar for Taiga Mikami taigamikami
1
220
AI駆動開発でなんでもハンズオン環境をつくってみた
Avatar for yoshimi0227 yoshimi0227
0
200
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
1.7k
Claude Codeを組織で使いこなす— サーバサイドAIエージェント運用の実践知
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
180
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.9k
先取りMaven4 ～16年ぶりのメジャーアップデート、その進化とは？～
Avatar for 荻原利雄 ogiwarat
0
130

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
780
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
310
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
570
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
390
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k

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