[B! javascript][webpack] kikiki-kikiのブックマーク

2020 年の瀬の JS ビルド＆バンドルツールの検討

今年から ZOZO テクノロジーズの Web エンジニアになりました。@takewell です。もう年の瀬になりました。一年は早いですがブラウザの寿命は存外長いです。来年はきっと Internet Explorer のサポートブラウザから外すことができるかもしれない。来年はわざわざツールを介さずとも ECMAScript 202X が動くブラウザが世界中のみなさんに使われるようになるかもしれない。そう願ってなりませんが、現実はそうではありません。こうした課題を少しでもマシにするために webpack (シェア 76%)を代表とする ESNext (ECMAScript Next Generation) なコードをレガシーブラウザにビルドしたり、コードを単一ファイルにバンドルしたりするツールが数多く存在します。(以降、ビルド&バンドルなどの事前変換処理をプリプロセスと表記します。) こ

kikiki-kiki 2021/10/27

リンク

webpackとRollup：似て非なるもの | POSTD

先日、Facebookは膨大なプルリクエストをReactにマージして、既存のビルドシステムを Rollup ベースのシステムに移行しました。その結果、何人もの人々から「なぜwebpackではなくRollupを選んだのか」という質問が寄せられました。これは、もっともな疑問でしょう。 webpack は、近年JavaScriptコミュニティで最も評価されているツールの1つです。毎月のダウンロード数は何百万件にもおよび、何万個ものウェブサイトやアプリケーションに使用されています。巨大なエコシステムがあり、コントリビュータも多くいます。さらにオープンソースプロジェクトとしては珍しく、かなりの寄付金が集まっています。それに比べるとRollupは小規模です。しかしReact以外にも、Vue、Ember、Preact、D3、Three.js、Momentなど、数々の有名なライブラリに

kikiki-kiki 2021/01/15

リンク

webpack 4 の optimization.splitChunks の使い方、使い所〜廃止された CommonsChunkPlugin から移行する〜 - Qiita

はじめに先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提とした記事ですので、基礎知識を習得したい方はwebpack 4入門をご覧ください。 optimization.splitChunksとは「複数のエントリーポイント間で利用している共通モジュール

kikiki-kiki 2021/01/07

リンク

CSS Modules 所感 - morishitter blog

CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS（Cascading Style Sheets）というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ

kikiki-kiki 2020/10/20

CSS Modules

リンク

ファイルサイズを減らす · Webフロントエンドパフォーマンス改善ハンドブック

ファイルサイズを減らすページロードを早くすることにおいてファイルサイズを小さくすることは重要です。特にJavaScriptのようなパースやコンパイルといった処理を必要するスクリプトのファイルサイズを減らすことは、そのまま処理コストにも影響します。次の記事でもあるように同じサイズのJavaScriptと画像は同じコストではありません。 The Cost Of JavaScript In 2018 – Addy Osmani – Medium しかしながら、ファイルサイズを小さくするにはアプリケーションによってさまざまなパターンが考えられます。ここではいくつかのアプローチについて見ていきます。 Bundleを分析するこれは単純ですがWebpackなどでbundleしたJavaScriptファイルを分析するというアプローチです。ここで見つける問題としては意図せずに入ってしまっている

kikiki-kiki 2020/10/18

リンク

Webpack でビルド時に環境ごとに読み込む環境変数を分けたい - Qiita

概要ほとんどの Laravel などのバックエンドフレームワークは環境変数ファイルが用意され、環境ごとに読み込まれる環境変数を動的に変えることができる機能が備わっています。しかし、javascript の場合は環境変数を環境ごとに読み込む機能を自分で設定するか npm パッケージを利用するしかなかったので、自分的ベストな方法をまとめておきます。結論 Webpack の alias 機能を使えばパッケージやライブラリなしで環境変数を分けることができます!!!!!! 設定方法今回編集するファイルは下記ファイルになります。前提環境開発環境は node サーバをローカルにたてて開発。本番、ステージサーバは CI・CD を利用してビルド後デプロイするといった環境で行いました。フォルダ構成フォルダ構成は下記のとおり Webpack を利用した際の一般的な javascript の開

kikiki-kiki 2020/09/28

リンク

dotenvとcross-envで環境変数を設定して開発環境の処理を切り替える｜ Tips Note by TAM

開発用と公開用で読み込むデータを変更したい、Gitで同じ開発環境を共有しながら一部のデータは作業者のPCで設定できるようにしたい。要件が複雑な案件では、開発環境もより柔軟性のある設定にしておきたいことがあります。たとえば、https環境が必須の機能を検証するためにbrowser-syncの設定が必要な場合です。各自のPCで証明書の発行が必要なので、Gitで共有することができません。 Google Maps APIやデータベースと連携するAPIを開発用と公開用で変更する場合もあります。切り替えるたびにソースコードを書き換えていると、本来不必要なコミット履歴が増え、開発用のAPIのまま本番環境に公開してしまったなんてことも起こってしまうかもしれません。今回は柔軟性のある開発環境にするために便利な、環境変数とenv（エンブ）を紹介します。環境変数とenv（エンブ）とは環境変数とは、OS

kikiki-kiki 2020/09/28

リンク

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

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

kikiki-kiki 2020/09/22

リンク

webpack.config.jsの読み方、書き方 - dackdive's blog

（2017/08/28追記）この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github.com/zaki-yama/react-redux-template https://github.com/zaki-yama/redux-express-template （追記ここまで）はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが公式チュートリアルでも webpack.config.js については少ししか触れ

kikiki-kiki 2020/06/02

リンク

俺の webpack.config.js-20200503 - mizchi's blog

基本思想とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEm it でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの

kikiki-kiki 2020/05/03

リンク

2018 年の tree shaking - 株式会社カブク

Discussion 1. CommonJS は tree shaking されない ※追記、修正ありすべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex