Pasta-K @ Kyoto.js 17 Nota Inc Gyazo開発チーム アルバイト JavaScript / React / Ruby on Rails / Browser Extension ウェブアプリケーションを作っていると、素朴だったページも雪だるま式に色んなものがくっついてくる jQuery/React/axios/lodash ...etc 徐々に開発していくにつれてパフォーマンスが低下していく そもそも、実はそんなに頑張ってなくて遅かったよねということもある 100点は無理でも、60点くらいと思いつつも、結果的には30点くらいになっている 多分やってない場合はシュッとやるとなんか効果があったりすると思います 一般的なテクニックを適応しようという話なので、感動的なテクニックや面白ハックとかは出てきません lightroomとか使うとこういう文言が出てきます First Contentful Paintなどが遅いと効果的だと思います ファーストビューに出るものだけ読み込んでレンダリングさせる <img> の loading 属性を使うとChromeではLazyLoadingしてくれる <img loading="lazy" src="..."> IntersectionObserver などを使って画面内に登場する要素だけを読み込むようにコントロールするという手もある 素朴にやってるとCSSで見た目上は隠しているけど、一方画像は読み込んでいるとかもある… 現代的なウェブページやウェブアプリケーションはJavaScriptの実行が必須 そもそもReact/Angular/Vueなど使っていると実行しないことには始まらない 一方でJavaScriptを読み込んで、実行するコストは高い JavaScriptを読み込むサイズが大きいとそれだけで大きなコストになる 画像サイズ削るのとJSのサイズ削るのとでコストがこれくらい変わるの言われると納得感あるけど、直感と少し違うようにも思う 前述のSNSボタンの読み込み遅延も結果的にJSを減らすことに繋がる $ webpack --profile --json > stats.json $ npx webpack-bundle-analyzer bundle/output/path/stats.json 一旦 lodash-es に置換したら良いと思います tree shakingされて使わないやつは消えます 不要なモジュールの例: Moment.jsのlocaleを選択的に利用する 何もしないとMoment.jsは全てのlocaleを含んでいる > 75% (160 minified KBs)¹ of Moment.js’ size are files used for localization. They are always included when you build your app with webpack. const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); new MomentLocalesPlugin(), new MomentLocalesPlugin({ localesToKeep: ['es-us', 'ru'], webpackのCode Splittingを活用する dynamic importと組み合わせてJSを1つのファイルにまとめずにchunkに分割してくれる エントリポイントになるJavaScriptファイルは小さくなり、パースや実行の時間を短く出来る [ポエム] Chunkの分割を上手く戦略的にやったり、こちらもpreloadを設定しないと、メインの実行パス内でdynamic importをすることになってしまい結果的にJSの実行中にファイルの取得とパース等が起きてしまい終端のJavaScriptを実行するまでの時間が結果的に長くなり、レンダリングまでの時間が延びるということもある なんかJSの実行に掛かる時間が長いなと思って調査したら、これだったことがある そもそもentrypointを分けたら良いやんみたいな気持ちになってしまう 重たい処理や後回しに出来る処理は requestIdleCallback で先送りにする メインコンテンツのレンダリングに関わるもの以外を一旦あとにする JavaScriptを async で読み込んで、 DOMContentLoaded を待つ間に諸々の初期化をやっておく 必要なものはpreloadやprefetchを使って先に読んでおく そもそもAPIとかHTMLの吐き出しが遅いとかない？ JavaScriptの実行自体のパフォーマンスを検証する ウェブページが遅いな？と感じた時にやってみると良さそうなことを紹介しました 現代的なウェブアプリケーションをやっていくときの基本という感じもするけど、1つ1つを気にして削ることってあんまりないと思っていて、油断すると増えていたりするので、定期的に棚卸しすると良いのでは？ 