react と preact の評価時間を検証

意味

PWAでアプリを作ろうとすると、offline cache である程度ロード時間を無視できるとしても、 JSのCPU上の評価時間が支配的になっていく。

preact-compat(30kb) と react(91kb) でどれだけの差がでるのか調べることにした。

対象

このリポジトリ。 https://github.com/mizchi-sandbox/pwa-base
ルーター、 redux を含んでいる。 react, preact 以外の depｓ はこう。

  "dependencies": {
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "react-redux": "^5.0.6",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.2.0"
  },

ここにデプロイしてある
https://elegant-swanson-8f6420.netlify.com/

圧縮方法

uglify + gzip

評価方法

preact + preact-router / react + react-router
DevTools で Performance タブで CPU 1x と CPU 6x slowdown で比較

webpack.config.js

/* eslint-disable */
const path = require('path')
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const htmlPlugin = require('html-webpack-plugin')

const pkg = require('./package')
const ENV = process.env.NODE_ENV || 'development'
const DEV_PORT = 4444

const hmrEntries = [
  'react-hot-loader/patch',
  `webpack-dev-server/client?http://localhost:${DEV_PORT}`,
  'webpack/hot/only-dev-server'
]

const deps = Object.keys(pkg.dependencies)

module.exports = {
  entry: {
    vendor: (ENV !== 'production' ? hmrEntries : []).concat(deps),
    app: ['./src/index.js']
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    path: __dirname + '/public',
    publicPath: '/'
  },
  devServer: {
    contentBase: 'public/',
    historyApiFallback: true,
    port: DEV_PORT
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      react: 'preact-compat',
      'react-dom': 'preact-compat',
      'preact-compat': 'preact-compat/dist/preact-compat'
    }
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(
        process.env.NODE_ENV || 'development'
      )
    }),
    new htmlPlugin({
      template: 'src/ssr/index.ejs',
      minify: false
    })
  ].concat(
    ENV === 'production'
      ? [new UglifyJSPlugin({}), new CompressionPlugin()]
      : []
  )
}

vendor.bundle.js と app.bundle.js ２つ生成している

preact

size: 108kb
evaluate(CPU 1x): 151ms
evaluate(CPU 6x slowdown): 571ms

react

size: 120kb
evaluate(CPU 1x): 244ms
evaluate(CPU 6x slowdown): 960ms

結果

圧縮後は思ったよりサイズの差は出ない。

評価時間は PC でも 100ms、 遅い環境だと顕著になっていく。

Chrome Dev Tools だと No throttling 4x 6x の三択なんだけど、これがどういう意図の数値なのかは知らないけど、なんとなくモバイル相当だと予想している。