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
510
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
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
470
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
Why does continuous profiling matter to developers? #appdevelopercon
salaboy
0
190
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
110
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
170
Platform Engineering for Software Developers and Architects
syntasso
1
520
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
TypeScript、上達の瞬間
sadnessojisan
46
13k
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
180
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Featured
See All Featured
Speed Design
sergeychernyshev
24
610
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
BBQ
matthewcrist
85
9.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
4 Signs Your Business is Dying
shpigford
180
21k
The Cult of Friendly URLs
andyhume
78
6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Rails Girls Zürich Keynote
gr2m
94
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Writing Fast Ruby
sferik
627
61k
How GitHub (no longer) Works
holman
310
140k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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
まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。