フロントエンドの難しさに気づかされたWeb Speed Hackathon

はじめに

2月6日（土）～2月7日（日）の二日間にかけて、サイバーエージェント社主催の Web Speed Hackathon に参加しました。 結果としては57.45点で15位を記録して終わりました。

フロントエンドは全然触ったことがないので、自分がどれくらいできるのかとても不安だったのですが、思ったよりもできていたのでよかったです。 前日に過去の問題の解説を読んでいるときは Space Cat になってしまったのですが、実際に競技に取り組んでみると意外と Space Cat にはならなかった印象があります。

また、競技中は Webpack に悩まされたり、パッケージの依存関係に悩まされましたが、先述の通り過去の問題の解説があったので、そちらを参照して今回の問題でも対応できそうな部分を変えていきました。

ハッカソンに関するルールや内容などは同じく参加した方のブログを参照してください。

kaaazu.hateblo.jp

やったこと（時系列）

書いていることが若干違う可能性がありますのでご了承を。 （違っていたらリプライください）

• NODE_ENV=development -> NODE_ENV=production

- "build": "cross-env NODE_ENV=development webpack",
+ "build": "cross-env NODE_ENV=production webpack",

• Webpack ( Source Maps, Mode ) の変更

- mode: 'none',
+ mode: 'production', // or mode: process.env.NODE_ENV,

- devtool: 'inline-source-map',
+ devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',

• PostCSS ( Source Maps ) の変更

- map: true,
+ map: false, // or map: { inline: false },

• PostCSS ( postcss-custom-properties ) の変更

+ const postcss = require('postcss');
+ const postcssCustomProperties = require('postcss-custom-properties');

// ...

+   postcssCustomProperties({
+     preserve: false,
+   })

• PostCSS ( postcss-calc & cssnano ) の追加

+ const calc = require('postcss-calc');
+ const cssnano = require('cssnano');

// ...

+   calc(),
+   cssnano(),

• Lazy Loading の追加

• JPEG を WebP に変換

• GIF の最適化

• useBuiltIns の変更

-       useBuiltIns: false,
+       useBuiltIns: 'usage',

これ以上は難しいと思ったのでここで断念。

やりたかったができなかったこと

• CSS の最適化

• lodash の消去

• bluebird の消去

• 静的ファイルの配信を最適化 ( Fastify の導入 )

最後に

もし前回の解説がなかったら今頃 Space Cat になってただろうなと思っています。

また、今回の競技に参加して、自分のフロントエンドに対する考え方が少しだけ変わった気がします。

次回に向けてですが、Webpack についてもう少し詳しくなっておきたいということと、解説内で使われたパッケージについてしっかりと調べておきたいです。

とても楽しかったのでまた開催されることを楽しみにしています。