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
450
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.8k
CASE STUDY #3
unshift
2
610
Other Decks in Technology
See All in Technology
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
KATA
mclloyd
20
13k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Music & Morning Musume
bryan
43
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Bash Introduction
62gerente
607
210k
How GitHub (no longer) Works
holman
305
140k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
We Have a Design System, Now What?
morganepeng
46
7k
Designing the Hi-DPI Web
ddemaree
276
34k
What's in a price? How to price your products and services
michaelherold
239
11k
Agile that works and the tools we love
rasmusluckow
325
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
まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。