You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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: The --json=compilation-stats.json flag indicates to webpack that it should emit the compilation-stats.json cont
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
トラッキング ローダー/プラグイン作者向け 変更一覧 簡単なマイグレーションガイド #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
TypeWiz is a tool that helps you enrich your TypeScript code while saving your precious time by automating the task of adding types to your code. So for example, given the following code: function calculate(a, b) { return a + b; }calculate(5, 10);The output of TypeWiz would be: function calculate(a: number, b: number) { return a + b; }calculate(5, 10);(Note the addition of : number type annotation
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
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
ということで、前々回書いた通り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以外の用途にも使う
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.infoでは不定期でレポートという形で、特定のテーマに関する状況をまとめています。 jser/report レポートなどの更新情報を知りたい方はRSSやTwitter@jser_infoをフォローしてみてください。 Bundler #1 JavaScriptのコードはモジュールに分けて開発することが一般的です。 ブラウザにおいて、一つずつ<script>タグでモジュールをロードするのはラウンドトリップやコネクションの問題が発生します。 そのため、多くの場合ブラウザ向けのコードはモジュールをまとめた(bundleした)ファイルを作成して配信します。 ES6 ModulesはHTTP/2によってconcat無しで使えるようになるのか - teppeis blog レトロエンジニアのための近代Webフロントエンド事情 - Qiita その際にモジュールの依存関係などを解決しながらファイ
Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない(ちょっと触れる) 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く