Sequel Pro の動作が重くなった場合の解消方法

Sequel Pro が重くなったり、プチフリーズしたり、何か操作するたびにMacのカーソルがくるくるして、操作が快適にできないという問題が発生することがあります。

原因の一つとして、Sequel Pro は、「クエリの履歴」機能を持っており、実行したクエリを記録保持しています。
最近データの移行で手抜きをして数百万行のデータをSQL文としてコピーして、そのクエリを実行するということをしました。

結果、その数百万行のinsert文を読み込むので、Sequel Pro が非常に処理が遅くなるという事象につながりました。

「クエリの履歴」→「共用の履歴を削除」をクリックして履歴をクリアしたら、先ほどまでの処理遅さが嘘のように爆速快適になりました。

// Sequel Pro の削除、インストールとかをしたけど、しっかり消せてなくて、そのあたりの記録が残り続けていて解決しなかったという|ω・`)チラ

webpack のビルド性能を95%改善した方法(Boxの事例)

Box のエンジニアブログに「How we improved webpack build performance by 95%」という記事が投稿されました。
Box では、それまで3時間21分かかっていたビルド時間を9分に短縮させました。

  • シングルCPU
    • babel-loader でキャッシュを有効にして26%の性能改善
    • キャッシュを有効にして、 uglifyjs-webpack-plugin v1 で並列処理をして45%の性能改善
    • webpack.config.js から設定一覧をエクスポートしないようにして28%の性能改善
  • 10CPU
    • node.js Child Process API を使用して67%の性能改善

ビルドマシンにメモリ制限がある場合、webpack.config.js で設定一覧をエクスポートしない

Webpackはwebpack.config.js から複数の設定をarrayとしてエクスポートできます。
同時に25言語の bundle をビルドするのに、一つのロケールにつき1つで25設定のarrayをエクスポートするのに、この機能にメリットを感じていました。
小さな設定のみの場合はとても便利な機能なのですが、boxの場合は、ビルドプロセスにメモリと時間を非常に使います。
初期設定で、 –max_old_space_size (memory limit) のnodeプロセスでwebpackを実行するのに4GBにしていましたが、倍の8GBにしたら性能が50%改善し、ビルド時間が3.35時間から1.7時間に減りました。

同じメモリ制限では、各設定でwebpackを実行するように設定を変更すると、同時に複数の設定を処理する場合と比較して、パフォーマンスが約28%向上しました。

babel-loader でキャッシュを有効にする

babel-loader キャッシュは、cacheDirectoryオプションで簡単に有効にできます。

loader: 'babel-loader?cacheDirectory'

デフォルトでは、node_modules/.cache/babel-loaderに、babel-loaderキャッシュ結果が格納されます。
babel-loader キャッシュを有効にした後、ビルド性能が26%改善したました。

新しい uglifyjs-webpack-plugin v1 は大きな違いをもたらします

すでにwebpack 3で提供されている UglifyJSプラグイン(webpack.optimize.UglifyJsPlugin) を使用しているかもしれません。

新しいuglifyjs-webpack-plugin v1を使用して、 UglifyJS v3 で使用してwebpack 4で計画されています。
新しい機能は、複数プロセスで並列処理に対応し、キャッシュを活用しビルド性能を45%改善します。

現時点で、webpack 3で、 uglifyjs-webpack-plugin v1 を使用するためには、

  • devDependenciesに、「”uglifyjs-webpack-plugin”: “1.0.1”」を追加する
  • webpackから「-p」フラグを消し、「uglifyjs-webpack-plugin v0.4.6」が呼ばれないようにする

キャッシュと並列オプションをプラグインに追加します。

new UglifyJsPlugin({
   cache: true,
   parallel: true
})

マルチコアビルドのメリット

ビルドマシンが複数CPUを持っている場合、 node.js Cluster と Child Process API 、または worcker-fram を使用することでwebpackビルドにメリットがあります。並列に処理される9つのWebpack構成を有効にすることで、25の構成すべてをビルド性能が
67%改善しました。

Docker コンテナー起動エラー:driver failed programming external connectivity

Docker で次のようなエラーが出てコンテナーが起動できなくなってしまった時の対処方法。

ERROR: for lenet-lb  Cannot start service lb: driver failed programming external connectivity on endpoint lenet-lb (4d179b246b952fcf997b24b02c9027d0277c60feb9a3b65fef13af9c01c6a635): Error starting userland proxy: mkdir /port/tcp:0.0.0.0:443:tcp:172.18.0.7:443: file exists
ERROR: for lb  Cannot start service lb: driver failed programming external connectivity on endpoint lenet-lb (4d179b246b952fcf997b24b02c9027d0277c60feb9a3b65fef13af9c01c6a635): Error starting userland proxy: mkdir /port/tcp:0.0.0.0:443:tcp:172.18.0.7:443: file exists
ERROR: Encountered errors while bringing up the project.

結論としては、タスクバーにいるクジラマーク(Docker)のアイコンを右クリックして、「Quit Docker」でDockerを終了させたら復帰できた。ちなみに僕の時には、Mac OSの再起動では、エラーが解消しなかった。

困ったら、OSの再起動ではなく、DockerをQuitさせる。

復旧方法:「dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.58.dylib」nodeのエラー

Macでnodeを使おうとすると、「dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.58.dylib」とエラーが出て動かなくなっていたので、以下の方法を試したら復旧した。

brew uninstall –ignore-dependencies node icu4c
brew uninstall –force icu4c
brew install node

これで無事に、nodeが動くようになった。

書籍:『超速!Webページ速度改善ガイド』

超速!Webページ速度改善ガイドは 、Web系エンジニア、デザイナー必読の書だと思います。

とても勉強になり、いろんなページをスライドに書き起こして学びました。

例えばクリティカルレンダリングパス。
ブラウザがロードして描画するまでの関連処理が解説されています。

Google Chrome の DevToolをどのように使用して、どのように使えるのかの解説があります。
何となくで使っていたので知らない機能が多くとても勉強になりました。

まとめ

Webサイトのフロント側の速度改善をする際の手法やツール、ポイントが体系だってまとめられています。
改善するには計測して分析が必要になりますが、
解析ツール・サービスの紹介、DevToolの使い方(何トン買う使ってるけど使いこなせてないって思ってる人は必見)、
そこからどう読み解くのかの解説。

HTTP/1とHTTP/2を踏まえたチューニングポイントの解説。
レンダリングまでの各ターニングポイントとブロッキング、こういう場合はこう回避できるの説明がされています。
全体的に広範囲な内容を取り扱っているので網羅性は十分。
深みはどうしても薄かったり厚かったりしますが、それでも自分で調べられるようになる入り口には立てます。

読み終わった瞬間に自サイトをどう測定したらいいかイメージが持て、
その結果をどう読んで、どんな打ち手があるのかまでは漠然とはしていてもイメージがつかめる。
これはWeb系エンジニア、デザイナー必読の書だと思います。

読んで得られるものがなかったて人は、十分Webページ速度改善のエキスパート側に入ってます。