Fork me on GitHub

2017-12-11のJS: Parcel、webpack 4.0.0α、Node.js Performance改善ガイド

Edit on GitHub 編集履歴を見る

JSer.info #361 - 設定より規約(Convention over configuration)なbundlerであるParcelがリリースされました。

webpackFuseBoxは詳細を設定ファイルで扱いますが、Parcelには現時点では設定ファイルがありません。
代わりにビルトインのプラグインとpacakge.jsonに書かれたparcel-plugin-から始まる名前のパッケージをPluginsとして読み込むことで、対応するファイル(Assets)などを拡張します。
(Assetの内部処理として、それぞれのAssetsに対応する設定ファイルを使う仕組み。たとえばJSAssetならば内部的にBabelが利用され、.babelrcを読み込んで処理される)

JavaScriptだけではなくHTMLファイルをEntry pointとして扱うことができるため、典型的にはHTMLを起点にそこから読み込まれているAsset(CSSやJavaScriptなど)の依存を集めてビルドします。

$ parcel build src/index.html
# distフォルダへAssets毎{js,css,htmlなど}のパッケージ結果が出力される

また、FuseBoxのようなAsset単位のファイルキャッシュをしていて、デフォルトでは2度目のビルドからキャッシュが利用されます。
一方、公式サイトに掲載されているBenchmark詳細は明らかにされていないため、キャッシュなしにおける優位性は不明です。
(parcelではsource map supportがまだサポートされていないなど、同等の設定での計測かは明確にはなっていない。)


webpackの次のメジャーアップデートであるwebpack 4.0.0-alpha.0が公開されています。

BREAKING CHANGEとしてはNode.js 4のサポート終了、新しいプラグインシステムの追加と既存プラグインの変更などが中心です。既存のプラグインも基本的には互換性を持ちますが、一部プラグインではWorkaroundが必要になるようです。

新しく--modeオプション("devevelop" or "production")の追加が行われています。
これは現在の-d-pを整理して、webpackコア側の設定を"devevelop" or "production"にするものです。

また、module typeとしてesm(.mjs)とwebassembly(.wasm)をデフォルトで探すようになり、sideEffects設定のサポートなどが追加されています。

Parcelのリリースを受けて、webpackの今後のロードマップに投票できるVoteにZero Config Modeが追加されています。


Node.js Performance 改善ガイド - from scratchという記事ではNode.jsアプリケーションのパフォーマンス改善方法について書かれています。

メモリ、CPU、ファイルI/O、ネットワークそれぞれにおける典型的なボトルネックの調べ方や改善方法について。
また、JavaScriptの最適化の問題や、クラスタやNative Addonなどの代替手法についてなどについてかかれています。


ヘッドライン


Release 1.9.0: JSX Fragments, EditorConfig and Arrow Parens · prettier/prettier

github.com/prettier/prettier/releases/tag/1.9.0

JavaScript Tools ReleaseNote

Prettier 1.9.0リリース。
JSXのFragment(<></>)wpサポート、EditorConfigのサポート、Markdownのサポート改善。


📦 Parcel

parceljs.org/

JavaScript Tools

HTML,JS,CSSなどをまとめてbundleできるツール。
設定不要で使えること、高速にビルドできることが目的のツール。
ファイルタイプに対する処理をプラグインとして追加できる。


GoogleChromeLabs/jsvu: JavaScript (engine) Version Updater

github.com/GoogleChromeLabs/jsvu

JavaScript Tools

各種JavaScriptエンジンをダウンロード、インストールできるツール。
eshost-cliと組み合わせることでChakra、JavaScriptCore、SpiderMonkey、V8でのJavaScript実行結果を同時に得られる。


Release Notes for Safari Technology Preview 45 | WebKit

webkit.org/blog/8039/release-notes-for-safari-technology-preview-45/

safari ReleaseNote

Safari Technology Preview Release 45リリース。
SVGフィルターの最適化、display:contentsをデフォルトで有効化、OffscreenCanvas.getContext("webgl")を実装など


mochify.js/CHANGES.md at v5.0.0 · mantoni/mochify.js

github.com/mantoni/mochify.js/blob/v5.0.0/CHANGES.md

JavaScript testing ReleaseNote

Mochaを使ったテストをブラウザで動かすMchify 5.0.0リリース。
PhantomJSからHeadless Chromeに変更、--urlオプションの追加など


Angular 5.1 & More Now Available – Angular Blog

blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e

Angular ReleaseNote

Angular 5.1リリース。
CLIがService Workerオプション、App Shellオプションサポート、TypeScript 2.5サポートなど


webpack 4.0.0-alpha.0 feedback · Issue #6064 · webpack/webpack

github.com/webpack/webpack/issues/6064

webpack issue ReleaseNote

webpack 4.0.0-alpha.0リリース。
Node.js 4のサポート終了、--mode(dev/prod)の追加。
module typeとしてesm、webassemblyのサポート、sideEffects設定のサポート。
新しいプラグインシステムの追加と既存プラグインの変更など


アーティクル


Qiita の新記事ページのレイアウト実装 - Qiita

qiita.com/morishitter/items/c4aa500929f2de441bfd

CSS article

CSS Grid Layoutとposition: stickyでのレイアウトについて


PuppeteerでWebページからメインコンテンツっぽいところを抽出してみる - Qiita

qiita.com/ukyo/items/287169de85576dfed608

JavaScript article Chrome

PuppeteerでスクレイピングしたDOM要素のスコアリングして、メインコンテンツを抽出する仕組みについて


await vs return vs return await - JakeArchibald.com

jakearchibald.com/2017/await-vs-return-vs-return-await/

Promises JavaScript article

async functionの中でawaitreturnreturn awaitの違いについてを解説した記事


New in Chrome 63  |  Web  |  Google Developers

developers.google.com/web/updates/2017/12/nic63

Chrome ReleaseNote

Chrome 63リリース。
Dynamic imports、Async iterator、Promise#finallyIntl.PluralRules、CSS overscroll-behaviorプロパティのサポートなど


Node.js Performance 改善ガイド - from scratch

yosuke-furukawa.hatenablog.com/entry/2017/12/05/125517

node.js performance article

Node.jsのパフォーマンスの調査や測定をする方法について。
メモリリーク、CPUの処理時間、ファイルI/O、ネットワークのボトルネック調査について。
またJavaScriptのdeoptが起きてないか、クラスタやNative Addonなどの代替手法についてなど


Vanilla JSで学ぶRedux - Qiita

qiita.com/ryota-murakami/items/2ed6b12943214ecfeeaf

redux JavaScript article

Reduxのコードを見ながらReduxの仕組みについて解説している記事。


Prototype Tree · TryCatch

zhirzh.github.io/2017/12/06/prototype-tree/

JavaScript article d3.js

JavaScriptオブジェクトのprototypeツリーをD3.jsを使って可視化する話


歴史的遺物callback interfaceの紹介 - Qiita

qiita.com/yuki3/items/ab20985e70247c80d19c

JavaScript DOM WebPlatformAPI

addEventListenerのcallback interfaceとrequestAnimationFrameなどのcallback functionという仕様の違いついて。
イベントハンドラにおけるhandleEventの動作について


Using Headless Mode in Firefox – Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2017/12/using-headless-mode-in-firefox/

firefox Selenium article

SeleniumをFirefoxのHeadlessモードで動かす方法、Debugging Protocolについてなど


Fast Source Map Generation for React Native – David Aurelio – Medium

medium.com/@david.aurelio/medium-fast-source-map-generation-for-react-native-ea5549007c18

JavaScript sourcemap library article

React Native(Metro)が利用するSource Mapの高速な実装について
https://github.com/facebook/metro/tree/master/packages/metro-source-map


React Performance Fixes on Airbnb Listing Pages – Airbnb Engineering & Data Science – Medium

medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4

JavaScript React performance article

Reactを使ったアプリケーションのパフォーマンスを測定し、それをどのように修正していったかについての記事。
PureComponentでの無駄な描画を防止、スクロール時の処理、入力欄などについて


Performance Calendar » Clearing cache in the browser

calendar.perfplanet.com/2017/clearing-cache-in-the-browser/

browser article

ウェブアプリ側からブラウザのキャッシュをクリアするさまざまな手法のまとめ。
location.reload(true)、Vary、fetch、iframe、Clear-SIte-Dataなどの手法毎にブラウザの対応についてまとめている。


スライド、動画関係


JSConf Budapest 2017 - YouTube

www.youtube.com/playlist?list=PL37ZVnwpeshH9ztZfHqvQhF1_Zm4VcCTD

JavaScript video イベント

JSConf Budapest 2017の動画まとめ


Eirik Vullum: JavaScript Metaprogramming - ES6 Proxy Use and Abuse | JSConf Budapest 2017 - YouTube

www.youtube.com/watch?v=_5X2aB_mNp4

JavaScript slide video

ES Proxyを活用したメタプログラミングについての発表動画


MakeYouAReact - Google スライド

docs.google.com/presentation/d/1qh5ZCMI2e45Z4YZBcI62NMDt-1H2Uwx0sZ3T8ScNStk/pub?start=false&loop=false&delayms=60000#slide=id.g18b78f925cfb8077_17

React JavaScript slide DOM

ReactのようなViewライブラリを自作するために必要な技術について解説してるスライド。
実際に実装を作りながら、DOMのdiff/patchなどについて解説している。


サイト、サービス、ドキュメント


Three.js入門サイト - ICS MEDIA

ics.media/tutorial-three/index.html

JavaScript WebGL tutorial

Three.jsについてのチュートリアルサイト。
Three.jsの使い方やWebGLについて


i0natan/nodebestpractices: The largest Node.JS best practices list. Curated from the top ranked articles and always updated

github.com/i0natan/nodebestpractices

node.js server document

Node.jsとexpressについてのプラクティスガイド。


WasmFiddle

wasdk.github.io/WasmFiddle/

WebAssembly editor Tools

WebAssemblyのjsfiddle的なサービス。
Wasmのコンパイルと実行、wast/wasmのダウンロードができる。


jsdom/whatwg-mimetype: Parses, serializes, and manipulates MIME types, according to the WHATWG MIME Sniffing Standard

github.com/jsdom/whatwg-mimetype

WHATWG JavaScript library

MIME typesのパーサ、シリアライズライブラリ


ソフトウェア、ツール、ライブラリ関係


deeplearn.js

deeplearnjs.org/

JavaScript library 機械学習 WebGL

WebGLを使った機械学習向けのライブラリ。
同期的な(NumPyのような)計算実行と遅延的な(TensorFlowのような)計算実行をサポートしている。


この記事へ修正リクエストをする
記事を紹介する