【cordova-react】ページ読み込み速度改善の備忘録

以前からアプリの速度改善に取り組んでいるのですが、先人の知恵もあってページ起動時間がかなり短くなりました。

欲をかいてあと一秒早くしたいなーと思いながらgoogleでコードチューニングのことを調べていると、日本ラドウェア株式会社さんの記事が気になったので読んでみました。

すると、アプリのページ表示に3秒以上費やしてしまうと、ユーザーはストレスを感じWebサイトへのアクセスを取りやめてしまうという

興味をそそるような情報を発見。

今のアプリは起動迄3秒～4秒でアプリとしては十分な速度だったのですが、ダメ元で更に速度を改善できないかなと思い

有用な情報を探していたのですが、ここのサイトでloadable-componentsというライブラリを見つけました。

loadable-componentsは、code-splittingのように必要なページだけを読み込むことで読み込み時間の短縮が見込まれる期待を持っているライブラリです。

何も手をつけていないデフォルトの状態では、読み込むためのファイルはバンドルによって一つのファイルになっているのでこれを一気に

読んでいるのが原因で遅くなるのではと考えました。

試しに公式のコードを真似てアプリに加えてみました。すると、syntax error importで怒られてしまいました。

スタックオーバーフローをくまなく見ると、どうやらwebPackにloadable-componentsを動かす環境が整っていないために

起きるエラーみたいです。という訳でcreate-react-Appで立ち上げないといけないのですが、一から環境を変えてしまう訳にはいかない

ので、別の機会に自分でwebPackの設定をして動かせるように努めたいと思います。

一応サンプルだけ載せておきます。役にたつか分からないですが、公式が割とごちゃごちゃしているので載せておきます。

<span style="color: #666699;">routes.js</span>

import loadable from '@loadable/component'

//分割したいファイルを記述

export const Detail = loadable(() = import('./detail'))

<span style="color: #666699;">app.js
</span>import React, { Component } from 'react';
import Route from 'react-router-dom/Route';
import HashRouter from 'react-router-dom/HashRouter';
import Switch from 'react-router-dom/Switch';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Detail from './detail';
import * as routes from 'routes'
class Root extends Component {
  render() {
    return(
      <MuiThemeProvider>
        <HashRouter>
          <Switch>
            <Route exact path="/detail/:id" component={routes.Detail} />
          </Switch>
        </HashRouter>
      </MuiThemeProvider>
    );
  }
}