タグ

cssとwebpackに関するcuttoff19のブックマーク (3)

  • CSS Modulesの歴史、現在、これから - Hatena Developer Blog

    マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに

    CSS Modulesの歴史、現在、これから - Hatena Developer Blog
  • webpack4でTailwind CSSのファイルサイズ削減までやってみた - Qiita

    Tailwind CSS https://tailwindcss.com 作ったもの Simple Collage Maker ブラウザ上でローカルの画像ファイルを読み込み、連結して一枚の画像にするツール。 webpack + Vue.js + Tailwind CSSCSSのファイルサイズ約8KB。(普通にMinifyしただけだと600KBくらいになります。) ソースコードのファイル構成はこんな感じです。 インストール webpackはインストール済みとして、CSSローダー類とTailwind CSSをインストールします。

    webpack4でTailwind CSSのファイルサイズ削減までやってみた - Qiita
  • 静的サイトをとにかく高速化する話

    自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h

    静的サイトをとにかく高速化する話
  • 1