MonMonMonのブックマーク - はてなブックマーク

Webpack チャンク最適テクニック - Qiita
ターゲット巨大なSPAを作ってしまった人へ巨大なSPAを作らないように気をつけたい人へ今回はJSだけにフォーカスするが、もっというと、超速本を読んでください。注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。昨今のJSビルド問題と、その解決のためのゴール設定巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン
MonMonMon 2020/02/25
webpack

javascript
リンク
lodash やめ方 - Qiita
みなさん、 lodash で消耗してますか？私は消耗しています。なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？と投げつける用の記事になります。現代におい
MonMonMon 2019/12/24
javascript
リンク
春からはじめるモダンJavaScript / ES2015 - Qiita
春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。簡単に(雑な)歴史を紹介します。ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
MonMonMon 2016/03/17
javascript
リンク
HTML5 File API で画像をアップロードしてプレビュー - Qiita
<input type='file'/> で画像を選択させる input.onchange が発火するのでコールバックをとる File APIがあれば input.files[0] にFileオブジェクトが入ってるの抜き取る FileReader の FileReader#readAsDataURL に Fileオブジェクトを渡す FileRead#onload が発火するのでevent.target.result に Data uri が入ってる imgのsrcにData uri ぶち込む <img class='image-preview'/> <input type='file' class='file-selector'>upload</input> $preview = $('img.image-preview') $file = $('input.file-selector')
MonMonMon 2014/07/10
html5
リンク
1