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
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
160
エンジニア向け会社紹介資料
caddi_eng
15
250k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
110
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
1
750
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
4
640
実践的なバグバウンティ入門
scgajge12
4
2.1k
Javaにおける関数型プログラミンへの取り組み
skrb
5
110
[RSJ24] Task Success Prediction for Open-Vocabulary Manipulation Based on Multi-Level Aligned Representations
keio_smilab
PRO
0
220
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4k
中規模・ミドルTier開発組織におけるDevRelの戦略と実行と成果 - DevRel Guild Conference Mini -
leveragestech
2
260
Our Journey from in-House CD System to Open Source
ffjlabo
0
100
Building Static Websites with Sculpin
opdavies
0
1.4k
Featured
See All Featured
What the flash - Photography Introduction
edds
67
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
46
48k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
GitHub's CSS Performance
jonrohan
1029
450k
The Pragmatic Product Professional
lauravandoore
30
6.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Writing Fast Ruby
sferik
623
60k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Facilitating Awesome Meetings
lara
49
5.9k
A Philosophy of Restraint
colly
202
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.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
まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。