Stats Data | webpack
When compiling source code with webpack, users can generate a JSON file containing statistics about modules. These statistics can be used to analyze an application's dependency graph as well as to optimize compilation speed. The file is typically generated with the following CLI command: npx webpack --profile --json=compilation-stats.json The --json=compilation-stats.json flag indicates to webpack
Release v4.10.0 · webpack/webpack
Features Export and import name strings in them wasm are mangled Unused exports in wasm are removed (Tree Shaking) Don't expect size improvements yet since there is not minimizer for WASM yet which does the Dead Code Elimination, which is the second part for this optimization Direct WASM dependencies are enforced for: functions imports with i64 parameters or return values memory and table imports
webpack4への簡単なマイグレーションガイド - 技術探し
トラッキング ローダー/プラグイン作者向け 変更一覧 簡単なマイグレーションガイド #0CJS(Zero-Config JS) 環境 Node4のサポートが切れました webpack-cliへの分離 ローダー/プラグインのアップデートが必要 side-effects(old: pure-module) configファイル mode loadersからrulesへ プラグイン 変更 uglifyJS extract-text-webpack-plugin その他 コード System.import() webpackInclude/webpackExcludeのサポート モジュールタイプ CJSとESMについて 前提知識 javascript/esm さいごに まだ、公式の方で作成中の段階ですので、一旦ここにまとめます。 この記事では、loader/plugin開発側の話はしません。 me
Manual Typing is No Fun: Introducing TypeWiz!
I’m a big fan of TypeScript. The first time I heard about it was around 2013 (release 0.8), but back then, it wasn’t very mature: after trying it out in one or two smaller projects, I abandoned it. I started using it again around release 1.6 (2015) along with Angular 2, and have had such a great experience with it that I’ve slowly started migrating most of my existing projects to it. I also use it
🐛🔨 The Contributors Guide to webpack — Part 1 🎨 🖼
The Contributors Guide to webpack is a multi-part publication series outlining the many ways that you can learn about, and contribute to the webpack open source project. You can read the first article in the series here! A(n) (eco)system overviewFirst off, if you’ve gotten this far down the article, 👏 congratulations 👏! Jumping into an unfamiliar codebase (or any for that matter) for the first t
Deploying ES2015+ Code in Production Today — Philip Walton
Most web developers I talk to these days love writing JavaScript with all the newest language features—async/await, classes, arrow functions, etc. However, despite the fact that all modern browsers can run ES2015+ code and natively support the features I just mentioned, most developers still transpile their code to ES5 and bundle it with polyfills to accommodate the small percentage of users still
Code SplittingでどれくらいReactアプリの初回ロード時間を減らせるか試してみる - Qiita
ということで、前々回書いた通りSSR(Server Side Rendering)したくない派ですが、CSRの問題は解決したいので今回は初期ロード時間対策でCode Splittingを試してみます。 基本的なことしか試さないので、一度も試したこと無い人向け程度の内容かと思います。 Code Splitting この記事で言うCode Splittingはこのproposalにあるdynamic importを使ったCode Splittingのことです。react-routerを使った場合にrouteごとにjsファイルを分けることで、初期ロード時に1つの大きなバンドルされたjsファイルを読み込むのではなく、それぞれのrouteごとに必要最小限のjsファイルを読み込むことで初期ロード時間を低下させることを目的としたものです。(Routeは今回のデモのための例で、Route以外の用途にも使う
Why Webpack 2's Tree Shaking is not as effective as you think
As WebPack 2 barrels forward, Tree Shaking --- or more technically, the removal of unused exports using static analysis --- is finding its way to the mainstream. Developers are putting their hopes high, as it promises to solve the pressing problem of bloated packages. Usually, only a fraction of code is actually needed from each dependency but their entire codebase is bundled, increasing the size.
JSerレポート #1 Bundlerの未来、テスティングフレームワークの現状
JSer.infoでは不定期でレポートという形で、特定のテーマに関する状況をまとめています。 jser/report レポートなどの更新情報を知りたい方はRSSやTwitter@jser_infoをフォローしてみてください。 Bundler #1 JavaScriptのコードはモジュールに分けて開発することが一般的です。 ブラウザにおいて、一つずつ<script>タグでモジュールをロードするのはラウンドトリップやコネクションの問題が発生します。 そのため、多くの場合ブラウザ向けのコードはモジュールをまとめた(bundleした)ファイルを作成して配信します。 ES6 ModulesはHTTP/2によってconcat無しで使えるようになるのか - teppeis blog レトロエンジニアのための近代Webフロントエンド事情 - Qiita その際にモジュールの依存関係などを解決しながらファイ
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない（ちょっと触れる） 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任
webpack で moment.js の無駄なロケールファイルを除去する - Qiita
と書いて webpack でビルドすると、生成される bundle ファイルのサイズが非常に大きくなってしまいます。これは、moment.js が持つすべてのロケールファイルが bundle ファイルに含まれてしまうためです。ファイルサイズにシビアなフロントエンドではかなり大きな問題です。 (上図は source-map-explorer を使って生成しました） 解決策 webpack の IgnorePlugin か ContextReplacementPlugin を使えば、この問題を回避することが出来ます。 IgnorePlugin を使う場合 「デフォルトの en 以外にロケールファイルは必要ない」という場合は、IgnorePlugin が使えます。 const webpack = require('webpack'); module.exports = { //... plugi
Continuous Integration Using WebPagetest and Webpack – Engineering @ Housing – Medium
When we talked about Housing Go at JSFoo, there were a lot of queries about how we maintain the performance of our app over the time. Below is a description of how we do it. We started development of Housing Go with the focus on metrics like sizes of the chunks generated using Webpack, Time to First Byte, First Paint, Speed Index etc. We knew to keep the app performant we have to make sure that we
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - relative-ci/bundle-stats: Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, vite, rolldown and rollup.
GitHub - GoogleChromeLabs/webpack-libs-optimizations: Using a library in your webpack project? Here’s how to optimize it
GitHub - webpack-contrib/closure-webpack-plugin: Webpack Google Closure Compiler and Closure Library plugin -
GitHub - gwuhaolin/web-webpack-plugin: alternative for html-webpack-plugin
GitHub - samccone/bundle-buddy: A tool to understand your bundle size and why files are in your bundle
GitHub - indutny/webpack-common-shake: CommonJS Tree Shaker plugin for WebPack
GitHub - lodash/lodash-webpack-plugin: Smaller modular Lodash builds.
GitHub - GoogleChromeLabs/preload-webpack-plugin: Please use https://github.com/vuejs/preload-webpack-plugin instead.
