Published on

webpack,babelとは？

Authors
  • avatar
    Name
    Kikusan
    Twitter

node.js

node.jsはバックエンドで動作する非同期型イベントクドウJavaScriptランタイム。
node.jsにはnpmやyarnといったパッケージマネージャが存在する。
このパッケージマネージャによってライブラリ管理ができる。

Babel

Babelは新しいJavaScript構文を環境に合わせてダウンコンパイルする役割を持つパッケージ。

webpack

webpackは昔のブラウザでもモジュール機構を再現するモジュールバンドラー。

近年のJavaScriptにはNode.jsにおけるCommonJSと、ES2015で採択されたES Modulesの2つのモジュールシステムがある。
今後はES Modulesへ一本化される流れがある。
webpackのモジュールをまとめる起点にbabel-loaderを使用することで、babelで変換を行ってからモジュールをまとめることができる。
モジュールシステムを使うことで依存関係が分かりやすく、またファイルをまとめることでパフォーマンスも改善される。

  • ES Modules
// modules.js
export function add(a, b) {
  return a + b;
}
const sub = (n, n2) => n - n2;
export default sub;

// index.js
import sub, { add } from "./modules.js";
console.log(`1 - 2 = ${sub(1, 2)}`);
console.log(`1 + 2 = ${add(1, 2)}`);

こうやって書かれたものを、昔のブラウザでも動作させることができる。

  • モジュール: webpackでまとめるファイルのこと
  • エントリーポイント: ファイルをまとめる際、最初に解析をはじめるファイルのこと
  • バンドル: まとめられたファイルのこと
  • ビルド: バンドルを出力するまでの一連の処理のこと

使用方法

# npm用にフォルダを初期化 package.json作成
npm init -y
# 開発用ライブラリをインストール package.jsonのdevDependenciesに記載される
npm install --save-dev webpack@5.30.0 webpack-cli@4.6.0
# babelインストール
npm install --save-dev babel-loader@8.2.2 @babel/core@7.13.10 @babel/preset-env@7.13.12

# 出力用ライブラリをインストール package.jsonのdependenciesに記載される
npm install --save jquery@3.6.0
  • package.jsonにscriptsを記載することで、コマンドを登録できる
{
  "name": "projectname",
  "scripts": {
    "build": "webpack" // npm run buildでwebpackコマンドが呼べる(プロジェクト内で使用するコマンドを明記できる)
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }
}
  • webpack.config.jsを作成・記載することでwebpackの動作を設定できる
const path = require('path');

module.exports = {
  // モード devlopmentではビルドが早く、productionではより最適化される
  mode: 'development',
  // エントリーポイント
  entry: './src/index.js',
  // 出力の設定
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js.bundle.js',
  },
  module: {
    rules: [
      {
        // ローダーの処理対象file
        test: /¥.js$/,
        // ローダーの処理対象dir
        include: path.resolve(__dirname, 'src/js'),
        // 利用するローダー
        use: 'babel-loader',
      },
    ],
  },
}
  • babel.config.jsを指定することでbabelの動作を指定できる。
module.exports = {
  presets: [
    [
      '@babel/preset-env', 
      {
        "targets": "safari >= 10",
      },
    ]
  ],
};

パフォーマンス改善

計測

  • 開発者ツールNetworkタブで時間のかかっているレスポンスを探す
  • 開発者ツールperformanceタブで計測後Long taskの警告を探す
  • Lighthouseを定期実行する npx lighthouse --chrome-flags="--headless" --output html --output-path ./report.html "http://localhost:3000"

パフォーマンス知識

  • LCP: ビューポート内に表示されるもっとも大きな要素のレンダリングタイミング
  • FID: ユーザが初めて最初にページを操作したときから、実際にイベントハンドラの処理を開始できるまでの時間
  • CLS: 予期しないレイアウトシフトの個々のスコア合計

クリティカルレンダリングパス

https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=ja

初期表示に必要なリソースやステップのこと

  • CSS
    • 初期表示に必要なものだけ切り出す手法がある。
      node.jsではCriticalというツールが使える。
    • Sourceタブで未使用スタイルは赤いラインが入るので、削除する。
  • JavaScript
    • 初回画面構築に必要なければbodyタグを閉じる手前に入れる。スクリプトは処理が始まるとHTMLのパースをやめぷロッキングする要素になる。
    • async属性を入れるとダウンロードは非同期になるが、実行開始すると同様にパースはブロックされる。
    • defer属性を入れるとダウンロードを非同期にして、htmlパースが完了してからスクリプトの実行をする。

アナリティクス

計測

Googleアナリティクスで、埋め込みjsによってイベントを計測できる。

gtag("event", "アクション名", {
  "event_category": "カテゴリ名",
  "event_label": "ラベル名",
  "value": 0
})

オプティマイズ

Googleオプティマイズで、Googleアナリティクスで指定したイベントなどを使ってABテストができる。
ページビューやセッション直帰率なども指定できる。

サードパーティスクリプトは追加するとパフォーマンスには影響がでるので、計測を始めたところで一度テストする(AAテスト)

ユーザ環境再現

  • 開発者ツールNetworkタブで、帯域のエミュレートが可能。(3Gとか)
  • cookie使用可能かはjsで判断する
const isCookieEnabled = window.navigator.cookieEnabled;
if(!isCookieEnabled) {
  // cookieが利用できない場合
}
  • Sentryを使用することでユーザが起こしたエラーを検知できる -->
Discuss on Twitter