webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
NormalModuleReplacementPlugin | webpack
The NormalModuleReplacementPlugin allows you to replace resources that match resourceRegExp with newResource. If newResource is relative, it is resolved relative to the previous resource. If newResource is a function, it is expected to overwrite the request attribute of the supplied resource. This can be useful for allowing different behaviour between builds. new webpack.NormalModuleReplacementPlu
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Serverless - Bundle Lambda Functions with Webpack Tree Shaking | AntStack
GitHub - FullHuman/purgecss: Remove unused CSS
