[B! webpack] gfxのブックマーク

ちゃんと理解するCode Splitting - Qiita

Code Splitting、サボってきたのですが、必要になりそうだったので真面目に調べてみました。これからCode Splittingやりたい方の入口的な役割になれれば幸いです。 Code Splittingとはなにか Code Splittingはその名の通り「コードを分割すること」を指します。分割されたコードはユーザのアクションに応じて非同期に読み込まれます。ちなみにWebpackでentry point分けることとかもCode Splittingと言えばそうなのですが、本記事では触れません。また、別にSPAでなくともCode Splittingはパフォーマンス向上に利用できますが、これ以降はSPAを前提に話します。 Code Splittingの目的 Code Splittingの目的は初期表示にかかる時間、及びユーザがインタラクションできるようになるまでの時間の削減です。 S

gfx 2018/10/29

webpack

リンク

Reactをv16にアップグレードしたらuglifyjsの秘孔をついてハマった件 - Islands in the byte stream

追記: Terser v3.10.11 でこの問題が修正されていることを確認しました。現在は collapse_vars: false というワークアラウンドは不要になりました。 webpackのproduction buildの話です。 Reactが悪いわけではないんですが、たまたま秘孔をつくコードがReactないし関連するReact v16に依存するライブラリにあったんでしょうね。 Reactをv16にアップグレードしたら webpack で production build ができなくなった pluginを着脱しながら調べた結果、 uglifyjs がクラッシュしていることがわかった uglifyjs は現在オリジナル + 2つのforkがあり、すべてで再現する original: https://github.com/mishoo/UglifyJS fork 1: https:/

gfx 2018/10/13

blogged

リンク

compression-webpack-plugin + zopfli でgzip圧縮ファイルを用意する - Islands in the byte stream

sprocketsを使っているアセットは半ば自動的にgzip圧縮版ファイルが用意されるのでそれをnginxのgzip_staticなどでサーブすればいいわけですが、JSのビルドをwebpck化したときにそういえばgzipされたファイルを用意しなくなったなと。それでもまあ、nginxが圧縮はしてくれますが、nginx自身が行うon-the-flyよりも事前に時間をかけて圧縮するほうが圧縮効率はいいので、やらない手はありません。というわけでcompression-webpack-pluginです。これはデフォルトだとgzip圧縮しますが、圧縮ルーチンをカスタマイズできるのでnode-zopfli *1を使うこともできます。こんな感じに: const CompressionPlugin = require("compression-webpack-plugin"); const zopfli

gfx 2017/10/20

blogged

リンク

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

gfx 2017/05/01

リンク

Migrating from v1 to v2 - webpack

The following sections describe the major changes from webpack 1 to 2. Note that there were far fewer changes between 2 and 3, so that migration shouldn't be too bad. If you are running into issues, please see the changelog for details. This content may be moved to the blog post in the near future as version 2 has been out for a while. On top of that, version 3 was recently released and version 4