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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Takumi Hasegawa (unshift) Takumi Hasegawa (unshift)
March 03, 2020
Technology
1.8k
1

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

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

Avatar for Takumi Hasegawa (unshift)

Takumi Hasegawa (unshift)

March 03, 2020

More Decks by Takumi Hasegawa (unshift)

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

Other Decks in Technology

See All in Technology
それでも、技術なブログを書く理由 #kichijojipm / Why I Still Write Tech Blogs Even Now
Avatar for ShinkuFencer shinkufencer
0
480
変更し続けられるシステムをどう保つか — AI時代のSSoTという設計原則
Avatar for かわうそ kawauso
1
1.1k
AI時代の開発生産性を捉え直す — 経営と現場をつなぐ「開発組織のオブザーバビリティ」— / AI Dev Ex Conference 2026
Avatar for tkyowa tkyowa
1
1.3k
AI Native なプロダクト組織の立ち上げ方 : 生産性 100 倍への挑戦
Avatar for mikesorae mikesorae
0
1.3k
20260720_クラウド女子会×PyLadiesTokyoコラボ Amazon Bedrock ハンズオン用資料
Avatar for yuuuka yuuka51
1
110
AIとハーネスで育てるトランスコンパイラ / 20260722 Yasushi Katayama
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
780
文字起こし基盤の信頼性
Avatar for abnoumaru abnoumaru
0
120
事業成長とAI活用を止めないデータ基盤アーキテクチャの設計思想
Avatar for Noriaki Hiraki hiracky16
0
540
データエンジニアリングとドメイン駆動設計
Avatar for 増田 亨 masuda220
PRO
14
2.5k
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい！Databricksのai_queryについて調べてみた
Avatar for Kamoshika kamoshika
1
280
なぜ、あなたのエージェントは言うことを聞かないのか
Avatar for segavvy segavvy
1
380
「守りたい体験」を渡すだけで E2E を生成させられるようになった話
Avatar for May hinac0
2
1k

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
370
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
280
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
410
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.8k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k

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. まとめ 使う機能がわかってれば カスタムビルドが一番良さそう。