Upgrade to Pro — share decks privately, control downloads, hide ads and more …

three.js ファイルサイズ軽量化計画 / threejs file size

Avatar for Takumi Hasegawa (unshift) Takumi Hasegawa (unshift)
March 03, 2020
Technology
1
1.7k

three.js ファイルサイズ軽量化計画 / threejs file size

three.js ファイルサイズ軽量化計画

Avatar for Takumi Hasegawa (unshift)

Takumi Hasegawa (unshift)

March 03, 2020
Tweet

More Decks by Takumi Hasegawa (unshift)

See All by Takumi Hasegawa (unshift)
DIST.42 「クリエイティブコーディングはWebサイトのどこに活きるのか」
Avatar for Takumi Hasegawa (unshift) unshift
1
2.8k
CASE STUDY #3
Avatar for Takumi Hasegawa (unshift) unshift
2
640

Other Decks in Technology

See All in Technology
スクリプトの先へ！AIエージェントと組み合わせる モバイルE2Eテスト
Avatar for Ryo WATANABE error96num
0
150
Kaggleの経験が実務にどう活きているか / kaggle_findy
Avatar for Sansan R&D sansan_randd
7
1.3k
越境する組織づくり ─ 多様性を前提にしたチームビルディングとリードの実践知
Avatar for hrpnx kido_engineer
2
170
vLLM Community Meetup Tokyo #3 オープニングトーク
Avatar for jpishikawa jpishikawa
0
290
マネージャー版 "提案のレベル" を上げる
Avatar for konifar konifar
22
15k
事例に見るスマートファクトリーへの道筋〜工場データをAI Readyにする実践ステップ〜
Avatar for 濱田孝治 hamadakoji
1
270
JAWS FESTA 2025でリリースしたほぼリアルタイム文字起こし/翻訳機能の構成について
Avatar for 木村直紀 naoki8408
1
240
kintone開発のプラットフォームエンジニアの紹介
Avatar for Cybozu cybozuinsideout
PRO
0
850
オレ達はAWS管理をやりたいんじゃない！開発の生産性を爆アゲしたいんだ！！
Avatar for wkm2 wkm2
4
480
LINE Messengerの次世代ストレージ選定
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
19
7.7k
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.1k
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
Avatar for coconala_engineer coconala_engineer
3
690

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
84
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
150
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
250
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
200
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
210
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k

Transcript

  1. three.jsファイルサイズ軽量化計画 2020.03.03 three.js Meetup Tokyo #1 by Takumi Hasegawa

  2. unshift (アンシフト)という屋号で フリーランスのディベロッパーをやっています。 趣味でクリエイティブコーディングをしたりします。 長谷川 巧 (はせがわ たくみ) Front-end /

    Creative developer Portfolio: https://unshift.jp/ Twitter: @_unshift

  3. 昔作ったポートフォリオサイトが three.jsのサイトに載ってます。 (今のはthree.js製じゃない、、、)

  4. 昔の(私の)three.jsの使い方

  5. サイトからダウンロードした three.min.jsをそのまま配置して scriptタグに記述。 (200KB ~ 300KB)

  6. 最近は、three.jsの膨大な機能も 大して使いこなせないし 必要最低限の機能を実装した オレオレWebGLフレームワークを 使ってました。

  7. 久々にthree.jsを使おうと思ったら

  8. 609KB !!!

  9. そんな中、 知り合いのスーパーディベロッパー である なかのさん(@misaki_mofujp) のtweetを見て、 three.jsのファイルサイズ軽量化 について調べ始めました。 ※Tree Shakingについては後述

  10. three.jsのファイルサイズを減らすには 方法1: カスタムビルド 方法2: Tree Shaking

  11. 方法1: カスタムビルド three.jsのGitHubリポジトリには ソースからビルドするための環境が入っているので それをカスタマイズして必要な機能のみ入れた カスタム版three.jsをつくる。

  12. ※Node.jsが必要です。 Node.jsわからんって人はこの機会に 覚えてもいいかもしれません。 インストールする事自体は簡単。 説明は省略します。

  13. build/three.js build/three.module.js build/three.min.js が生成される。 ダウンロードしたリポジトリの ディレクトリで $ npm install でモジュールインストールが完了したら

    $ npm run build-closure するだけ。 ビルド自体は超簡単

  14. src/Three.js の「export」から 始まる行の中で、使いたいもの以外を コメントアウト (または削除)。 機能を絞るには そして $ npm build-closure

    を実行。

  15. 方法2 (応用編): モジュールバンドラーによる Tree Shaking WebpackやRollupなどのモジュールバンドラーによる Tree shakingによって必要な機能だけに絞る。

  16. ※Tree Shakingとは ざっくり言うと、 使用していないコード (デッドコード)を 削除してくれる機能のこと。

  17. Webpackを例として Tree Shakingするには… 1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く 2. Webpackの設定でmodeを”production”に設定 3.

    babelやTypescriptの設定に気をつける

  18. 1. モジュールの書き方をCommonJS形式でなく、 ES Module形式で書く

  19. 2. Webpackの設定でmodeを”production”に設定 https://webpack.js.org/configuration/mode/

  20. 3. babelやTypescriptの設定に気をつける デフォルトの設定だと、ES Module形式で記述しても CommonJSに変換されてしまう。ので、対処する。 ・@babel/preset-envならoptionでmodules: false ・TypescriptならtsconfigでcompilerOptionsの module: “es2015”などに設定

  21. 準備ができたので早速試してみる。

  22. まずは全部入りになる記述 561KB

  23. 使う機能だけ読み込み 561KB

  24. あれ、変わらない、、

  25. いろいろ調べた結果、 three.jsは Tree Shakingはできないとのこと。

  26. 解決策は3つ 1. カスタムビルドしたものを使う 2. モジュールのソースを直接読み込む 3. プラグインを使う

  27. 1. カスタムビルドしたものを使う

  28. 2. モジュールのソースを直接読み込む

  29. 　3. プラグインを使う three-minifierという、 WebpackとRollupで使えるプラグインがある https://github.com/yushijinhun/three-minifier

  30. まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。