Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
three.js ファイルサイズ軽量化計画 / threejs file size
Search
Takumi Hasegawa (unshift)
March 03, 2020
Technology
1
500
three.js ファイルサイズ軽量化計画 / threejs file size
three.js ファイルサイズ軽量化計画
Takumi Hasegawa (unshift)
March 03, 2020
Tweet
Share
More Decks by Takumi Hasegawa (unshift)
See All by Takumi Hasegawa (unshift)
DIST.42 「クリエイティブコーディングはWebサイトのどこに活きるのか」
unshift
1
2.3k
CASE STUDY #3
unshift
2
620
Other Decks in Technology
See All in Technology
Microsoft Intune アプリのトラブルシューティング
sophiakunii
1
400
Microsoft Fabric OneLake の実体について
ryomaru0825
0
190
Engineering at LY Corporation
lycorp_recruit_jp
0
320
FOSS4G 2024 Japan コアデイ 一般発表25 PythonでPLATEAUのデータを手軽に扱ってみる
ra0kley
1
130
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
7
560
QAEチームが辿った3年 ボクらが改善業務にスクラムを選んだワケ / 20241108_cloudsign_ques23
bengo4com
0
590
20241108_CS_LLMMT
shigashiyama
0
250
Datadog RUM を用いた UX 指標の監視・顧客対応への活用
imamura_ko_0314
0
110
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
0
120
形式手法の 10 メートル手前 #kernelvm / Kernel VM Study Hokuriku Part 7
ytaka23
5
750
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
110
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
400
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Six Lessons from altMBA
skipperchong
27
3.5k
Being A Developer After 40
akosma
86
590k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Why Our Code Smells
bkeepers
PRO
334
57k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Transcript
three.jsファイルサイズ軽量化計画 2020.03.03 three.js Meetup Tokyo #1 by Takumi Hasegawa
unshift (アンシフト)という屋号で フリーランスのディベロッパーをやっています。 趣味でクリエイティブコーディングをしたりします。 長谷川 巧 (はせがわ たくみ) Front-end /
Creative developer Portfolio: https://unshift.jp/ Twitter: @_unshift
昔作ったポートフォリオサイトが three.jsのサイトに載ってます。 (今のはthree.js製じゃない、、、)
昔の(私の)three.jsの使い方
サイトからダウンロードした three.min.jsをそのまま配置して scriptタグに記述。 (200KB ~ 300KB)
最近は、three.jsの膨大な機能も 大して使いこなせないし 必要最低限の機能を実装した オレオレWebGLフレームワークを 使ってました。
久々にthree.jsを使おうと思ったら
609KB !!!
そんな中、 知り合いのスーパーディベロッパー である なかのさん(@misaki_mofujp) のtweetを見て、 three.jsのファイルサイズ軽量化 について調べ始めました。 ※Tree Shakingについては後述
three.jsのファイルサイズを減らすには 方法1: カスタムビルド 方法2: Tree Shaking
方法1: カスタムビルド three.jsのGitHubリポジトリには ソースからビルドするための環境が入っているので それをカスタマイズして必要な機能のみ入れた カスタム版three.jsをつくる。
※Node.jsが必要です。 Node.jsわからんって人はこの機会に 覚えてもいいかもしれません。 インストールする事自体は簡単。 説明は省略します。
build/three.js build/three.module.js build/three.min.js が生成される。 ダウンロードしたリポジトリの ディレクトリで $ npm install でモジュールインストールが完了したら
$ npm run build-closure するだけ。 ビルド自体は超簡単
src/Three.js の「export」から 始まる行の中で、使いたいもの以外を コメントアウト (または削除)。 機能を絞るには そして $ npm build-closure
を実行。
方法2 (応用編): モジュールバンドラーによる Tree Shaking WebpackやRollupなどのモジュールバンドラーによる Tree shakingによって必要な機能だけに絞る。
※Tree Shakingとは ざっくり言うと、 使用していないコード (デッドコード)を 削除してくれる機能のこと。
Webpackを例として Tree Shakingするには… 1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く 2. Webpackの設定でmodeを”production”に設定 3.
babelやTypescriptの設定に気をつける
1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く
2. Webpackの設定でmodeを”production”に設定 https://webpack.js.org/configuration/mode/
3. babelやTypescriptの設定に気をつける デフォルトの設定だと、ES Module形式で記述しても CommonJSに変換されてしまう。ので、対処する。 ・@babel/preset-envならoptionでmodules: false ・TypescriptならtsconfigでcompilerOptionsの module: “es2015”などに設定
準備ができたので早速試してみる。
まずは全部入りになる記述 561KB
使う機能だけ読み込み 561KB
あれ、変わらない、、
いろいろ調べた結果、 three.jsは Tree Shakingはできないとのこと。
解決策は3つ 1. カスタムビルドしたものを使う 2. モジュールのソースを直接読み込む 3. プラグインを使う
1. カスタムビルドしたものを使う
2. モジュールのソースを直接読み込む
3. プラグインを使う three-minifierという、 WebpackとRollupで使えるプラグインがある https://github.com/yushijinhun/three-minifier
まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。