Whilst the trend is seemingly to rewrite every JavaScript build tool in other languages such as Rust or Go, the current JavaScript-based tools could be a lot faster. The build pipeline in a typical frontend project is usually composed of many different tools working together. But the diversification of tools makes it a little harder to spot performance problems for tooling maintainers as they need
著者情報 : kota-yata.com プレゼン動画 : https://www.youtube.com/watch?v=BcaPCnWZuvY
この記事は、 Svelte Advent Calendar 2020 - Qiita の 22 日目です。 昨今では、フロントエンドの JS を減らす圧が強くなってきています。とくに来年 4 月に導入される Core WebVital は SEO に関わるため、 マーケティング文脈でもフロントエンドの改善施策として、パフォーマンスを上げる圧が強くなっています。 Google の UX 指標「Core Web Vitals（コアウェブバイタル）」とは？LCP・FID・CLS を解説｜ ferret JavaScript よ。文明を捨て、自然に還れ。 ::ハブろぐ で、ユーザー体験を遅くするものとしてやり玉に上げられるのが、サードパーティスクリプトという、サイト外から読み込まれる第三者の script です。代表的なものが Google Tag Manager や Twitter や Face
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
リポジトリ euxn23/babel-and-polyfill-sample 想定読者 Babel を使っているが、 Polyfill がいまいちわからない方 Polyfill は使えるが、より最適なビルドを生成したい方 @babel/polyfill が非推奨になったことを受け現在の推奨実装を知りたい方 Polyfill とは 例として、以下の Promise を使ったコードを、 @babel/preset-env を使用して IE11 向けにビルドします。 input const main = () => { Promise.resolve().then(() => console.log('then')); } main(); output "use strict"; var main = function main() { Promise.resolve().then(functi
JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、バンドルせずに公開してしまうとパフォーマンスに悪影響を与える可能性がある。 numb86-tech.hatenablog.com ファイル数が増えれば増えるほど影響は深刻になるため、依存関係が深いライブラリを使っている場合などは、レイテンシが飛躍的に増加してしまう。 そのため、バンドルせずに公開するのは現実的ではない。 バンドルしてひとつのファイルにまとめてしまえば、JavaScript のダウンロードは一度で済む。 しかしそうすると今度は、バンドルファイルの肥大化という問題が発生する。 巨大なフ
"module"フィールド対応 パッケージはBundleを配布しないで重複した依存ライブラリは削減できました。 Tree Shaking webpack、rollup.js、ParcelといったBundlerではTree shakingと呼ばれる不要なコードを削除する仕組みを実装しています。 Tree Shaking Reduce JavaScript Payloads with Tree Shaking | Web Fundamentals | Google Developers Tree Shakingはモジュール間の構造を静的に解析して（副作用がない）不要なコードを削除する手法です。 Tree Shakingを行うには、モジュール間の依存関係を静的に解析できるようにしなければなりません。 CommonJSで広く使われているrequire()とmodule.exportsでのモジュール
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
