タグ

ブックマーク / qiita.com/mizchi (7)

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

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

    Webpack チャンク最適 テクニック - Qiita
    barlog
    barlog 2020/02/27
  • Berry(yarn v2) + TypeScript + PnP + Workspace でプロジェクトを作ってみた感想 - Qiita

    Berry(yarn v2) + TypeScript + PnP + Workspace でプロジェクトを作ってみた感想npmYARNyarnpkg berry(yarn v2) がそろそろリリースということで、使い込んでみた。その感想や yak-shaving などについて。 このリポジトリ https://github.com/mizchi/berry-typescript-project 日語での網羅的な解説はこちらの記事がくわしい https://qiita.com/dojineko/items/6f65fde3c47aed8b6318 記事は pnp の仕組みと webpack, jest, typescript を設定する泥臭い話がメイン。 使ってみた感想 npm とは完全に別系統に進化しつつある。互換があんまりない。 今対応するのは時期尚早でアーリーアダプターだけでよい

    Berry(yarn v2) + TypeScript + PnP + Workspace でプロジェクトを作ってみた感想 - Qiita
    barlog
    barlog 2020/02/19
    PnP推進は最適な方向だがレガシー ライブラリにとってはあまりにも破壊的ですね。
  • Monaco Editor をハックする - Qiita

    for ginza.js#7 @mizchi このスライドツールの作者 今はワケあってこの会場の会社にいる(Plaid) お品書き VSCode をハックしようとして敗北した MonacoEditor をハックしてる フロントエンド仕事、ブラウザだけで完結するはず、と思ったことないですか? フロントエンドのおしごと コンポーネントを作る ビルドする テストする ブラウザで確認する フロントエンドのおしごと コンポーネントを作る(ブラウザでできる?) ビルドする(ブラウザでできる?) テストする(ブラウザでできる) ブラウザで確認する(ブラウザでできる) 経緯: コンパイラを作った フロントエンドフロントエンドをビルドする で、ブラウザ上で動くコンパイラ作った 今日は、このコンパイラを動かすためのエディタを作ってる話 @mizchi/web-compiler (仮)ができること サンプル

    Monaco Editor をハックする - Qiita
    barlog
    barlog 2019/12/10
  • universal-router で react-router を倒す - Qiita

    Universal Router とは isomorphicガチ勢の kriasoft 先生作の Router ライブラリ。 内部的には path-to-regexp だから express と同じルール import UniversalRouter from 'universal-router' const routes = [ { path: '', // optional action: () => `<h1>Home</h1>`, }, { path: '/posts', action: () => console.log('checking child routes for /posts'), children: [ { path: '', // optional, matches both "/posts" and "/posts/" action: () => `<h1>Po

    universal-router で react-router を倒す - Qiita
    barlog
    barlog 2018/02/06
    vs Next.js, 超人向け
  • Expo ではじめる ReactNative 開発環境 - Qiita

    某所で調べた資料 Expo とは ReactNative上で、JS のみで ios/android アプリを作る開発/ビルド環境。ネイティブプラグインが使えないという縛りを受け入れることで、アプリをQRコード経由で簡単に公開したり、共有したりできる。 ios/android のコードを書かなくていい、というか一切書けない。 参考: expo.ioを使ってリアルタイムにReact Nativeアプリを開発する http://amagitakayosi.hatenablog.com/entry/2017/04/18/120000 Hello World $ npm install -g exp $ exp init my-native-app $ exp start # 開発用ビルドの開始 $ exp build:ios # 番用ビルド

    Expo ではじめる ReactNative 開発環境 - Qiita
    barlog
    barlog 2017/06/28
  • 春からはじめるモダンJavaScript / ES2015 - Qiita

    春ですね!人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScript歴史 まず最初にJavaScript歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ

    春からはじめるモダンJavaScript / ES2015 - Qiita
    barlog
    barlog 2016/03/16
    素晴らしや!
  • なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita

    追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか!という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative

    なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
    barlog
    barlog 2014/12/01
  • 1