JSer.info #388 - bundlerであるParcel v1.9.0がリリースされました。

今までParcelにはwebpackやrollupのようなTree Shakingが実装されていませんでしたが、Parcel v1.9.0では--experimental-scope-hoistingのフラグ付きでTree Shakingが実装されています。
これによってbundle後のファイルサイズが小さくなるように改善されています。

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

またファイル監視の仕組みをBackground workerに移動させるなどして速度の改善、Sassなどで~/tildeのようなチルダを使ったimportに対応などが行われています。

Headless ChromeのHigh Level APIライブラリであるPuppeteer 1.5.0がリリースされました。

Release v1.5.0 · GoogleChrome/puppeteer

Browser Contexts APIが追加され複数の独立したブラウザセッションを扱えるようになっています。またWorkerクラスの追加などが行われています。

公式サイトがGoogleのもつgTLDである.devへ移行しています。

https://pptr.dev/

Using JavaScript modules on the web | Web Fundamentals | Google Developersという記事ではJavaScript modules(ES modules)の現状やChromeでの今後の実装について書かれています。

ブラウザでのscriptとmoduleの挙動の違い、Dynamic importとimport.metaについてといった挙動について。
bundleした場合とのそのままJavaScript modulesとしてロードしたときのパフォーマンスの差、小さくexportしたモジュールの方がキャッシュやツールにおいて有利な点やHTTP/2とPreloadについて。

また、Chromeで検討が進められているWeb Packaging、Layered API、Workerとの連携などJavaScript modulesに関係する仕様や実装についても書かれています。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

📦 Parcel v1.9.0 — Tree Shaking, 2x faster watcher, and more! 🚀

medium.com/@devongovett/parcel-v1-9-0-tree-shaking-2x-faster-watcher-and-more-87f2e1a70f79

JavaScript Tools ReleaseNote

Parcel v1.9.0リリース。
Tree Shakingの実装、sideEffectsのサポート、ファイル監視の改善、Sassの~/ importのサポートなど

parcel/changelog.md at master · parcel-bundler/parcel

Release v1.5.0 · GoogleChrome/puppeteer

github.com/GoogleChrome/puppeteer/releases/tag/v1.5.0

JavaScript Chrome Tools ReleaseNote

Puppeteer v1.5.0リリース。
BrowserContextが追加され複数の独立したブラウザセッションを扱えるように、Workerクラスの追加、公式サイトがpptr.devとなるなど

Announcing: Greenkeeper 3 – Greenkeeper Blog

blog.greenkeeper.io/announcing-greenkeeper-3-1504f5113998

webservice JavaScript library ReleaseNote

依存パッケージの管理サービスであるGreenkeeper 3リリース。
monorepoのサポート、greenkeeper.jsonの設定ファイルをサポート、コミットメッセージのカスタマイズができるようになるなど

アーティクル

素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受する - Qiita

qiita.com/terrierscript/items/a9826bc58d550d1b2764

TypeScript article

TypeScritptをJavaScript/JSDocの型チェックツールとして利用する方法について

Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers — Smashing Magazine

www.smashingmagazine.com/2018/06/nodejs-tools-techniques-performance-servers/

node.js article

Node.jsサーバのautocannonを使ったベンチマーク、パフォーマンスのボトルネック調査、メモリリークの調査や改善などについて

Detecting autofilled fields in Javascript – Tommy Brunn – Medium

medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7

CSS JavaScript article

フォームのautofillを検知する方法について。
autofillにCSS animationをつけて、animtaionstartで発生を検知する方法について

🚀 Introducing Akita: A New State Management Pattern for Angular Applications

netbasal.com/introducing-akita-a-new-state-management-pattern-for-angular-applications-f2f0fab5a8

JavaScript Angular TypeScript library article

Angular向けのステート管理ライブラリであるAkitaについての記事。

datorama/akita: 🚀 Simple and Effective State Management for Angular Applications

JavaScript engine fundamentals: Shapes and Inline Caches · Mathias Bynens

mathiasbynens.be/notes/shapes-ics

JavaScript article video

JavaScriptエンジンがどのようにJavaScriptのコードを処理しているかについての解説。
それぞれのブラウザがもつJavaScript VMにおける最適化のパイプライン処理について

Node.jsでつくるNode.js - もくじ - Qiita

qiita.com/massie_g/items/3ee11c105b4458686bc1

JavaScript node.js AST article

JavaScriptでJavaScriptのサブセットを作る話。
「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」のNode.jsでの実装について。

Understanding the Almighty Reducer | CSS-Tricks

css-tricks.com/understanding-the-almighty-reducer/

JavaScript article

Array.prototype.reduceについての記事。
reduceメソッドの動作イメージや、動きについて動画を混じえて解説している。

Using JavaScript modules on the web | Web Fundamentals | Google Developers

developers.google.com/web/fundamentals/primers/modules

JavaScript module article

JavaScriptモジュールの挙動や実装についての記事。
ブラウザでのscriptとmoduleの挙動の違い、Dynamic importとimport.metaについて。
また、bundleした場合とのパフォーマンスの差や小さくexportしたモジュールの方が有利な点やHTTP/2とPreload。
Chromeで検討が進められてるWeb Packaging、Layered API、Workerとの連携などについて