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

Webpack チャンク最適テクニック - Qiita

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

JHashimoto 2020/02/26

リンク

lodash やめ方 - Qiita

みなさん、 lodash で消耗してますか？私は消耗しています。なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？と投げつける用の記事になります。現代におい

JHashimoto 2019/12/27

リンク

テストがないJS環境にモダンなテスト環境を導入していく - Qiita

Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。前提として browserify-rails とbabelify が導入されている状況を想定してる。基本方針新規コードはES2015で書く本番はbrowserify(-rails)でコンパイルする。単体テストは node 環境下で走らせるテスト環境下では jsdom で window, document をモックする単体テストではブラウザ特有の挙動はテストしない裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる事前準備 browserify-railsを導入する。 .babelr

JHashimoto 2016/01/11

リンク

NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita

最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。 Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita Nightmareの良い点 Zero configuration というかただのスクレイパー悪い点プロセス立ちあげるのが遅い JSわかってないと読みづらい PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。連番のスクリーションショットを取りながらNightmareを走らせるサンプル Nightmare = require 'nightmare' class TestRunner extends Nig

JHashimoto 2015/03/04

“ImageMagick で convert -delay 30 -loop 0 **/*.png e2e.gif で0.3sごとに切り替わるgifが作れる。雑に目視チェックしてホワイトアウトしてないか、ミスって画面切り替わりそこねてないかとか確認して、問題なかったらコミット。”

リンク

俺のJSライブラリの世界観(2014末版) - Qiita

概論ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。今日はライブラリの名前しか出さないんで各自ググるように。立場サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニアこのサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない　すまんな　他ってなんだろうな言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指しているのだけど、コアドメインをTypeScriptで書いて、それをUI層からCoffeeScri