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
460
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
1.9k
CASE STUDY #3
unshift
2
610
Other Decks in Technology
See All in Technology
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
120
AWS IAM Identity Center議論会 〜 認証認可結合モデルと認証認可分離モデル / 20240827-jawsug-arch-iam_identity_center
opelab
3
320
Azure SQL Database Hyperscale HA レプリカの監視
sansantech
PRO
0
190
リクルート新人研修2024 テキスト生成AI活用
recruitengineers
PRO
10
420
ことばをそろえる / Bridging the Terminology Gap
amaotone
5
1k
タイミーのBraze活用 ~PUSH通知を活用したレコメンド~
ozeshun
2
120
GraphQLとスキーマファーストで切り開く ライドシェアの未来
ku0522a
0
490
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMAアプリインフラ刷新 / Building web server using Fastly and falco without Node.js for IPTV ABEMA app
nodaguti
0
240
実践的なバグバウンティ入門
scgajge12
4
2.1k
EitherT_with_Future
aoiroaoino
0
380
Featured
See All Featured
The Cult of Friendly URLs
andyhume
76
5.9k
How to train your dragon (web standard)
notwaldorf
85
5.6k
How STYLIGHT went responsive
nonsquared
93
5.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
RailsConf 2023
tenderlove
26
790
Become a Pro
speakerdeck
PRO
22
4.8k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.7k
GitHub's CSS Performance
jonrohan
1029
450k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
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
まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。