Gatsby starter for internationalized websites. https://habd.as/code/gatsby-starter-i18n-react-i18next/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Josh Habdas f21e2dad30
docs(readme): add optimizing section
17 hours ago
config Initial commit 1 week ago
docs Initial commit 1 week ago
src refactor(hooks): stop exporting metadata interface 1 day ago
.gitignore Initial commit 1 week ago
.prettierignore Initial commit 1 week ago
.prettierrc Initial commit 1 week ago
COPYING Initial commit 1 week ago
README.md docs(readme): add optimizing section 17 hours ago
gatsby-browser.js Initial commit 1 week ago
gatsby-config.js Initial commit 1 week ago
gatsby-node.js Initial commit 1 week ago
gatsby-ssr.js Initial commit 1 week ago
jest.config.js Initial commit 1 week ago
package.json Initial commit 1 week ago
tsconfig.json Initial commit 1 week ago
yarn.lock Initial commit 1 week ago

README.md

gatsby-starter-i18n-react-i18next

Gatsby starter for internationalized websites.

Build great-looking multilingual websites and apps with React using Gatsby.

Screenshot

screenshot

Included

Requirements

  • Node
  • TypeScript
  • Yarn

Installation

  1. Copy source code to your machine.
  2. Run yarn to install dependencies.

Usage

  • Run yarn dev to start a server for development.
  • Run yarn test to run unit tests.
  • Run yarn type-check to run type checker.
  • Run yarn build to build site for production.
  • Run yarn serve to view production build.

Optimizing

Gatsby uses server-side rendering to generate static HTML documents during its build process. When an HTML document built by Gatsby is loaded in a browser it will automatically download, parse and execute several JavaScript bundles to provide a better UX using a technique known as Hijax. No glue code is needed. It just works.

As JavaScript dependencies are added to a Gatsby site the size or quantity of the bundles generated during the build can increase. An increase in the size or quantity of bundles can have a tangible impact on user experience as a result of degraded performance or usability. This is true of any website and not a challenge specific to Gatsby.

If you notice any sluggishness in your website or app it may be time to consider optimizing performance. Using a DMIAC approach it’s possible to optimize in a scientific way. Here are some things you may wish to consider when optimizing a Gatsby site:

  • Use the Bundle Analyzer to measure bundle sizes, identify the largest bundles and determine if they can be removed.
  • If you’re only targeting the latest browsers you can reduce the size of the generated JavaScript bundles by dropping support for older browsers.
  • Consider using the Offline plugin to more heavily cache JavaScript bundles and other page resources in the browser.

It’s important to remember not to optimize until you’re able to measure performance improvements over time. Tools such as SpeedTracker, SiteSpeed and Lighthouse can help in this regard. Finally, do not optimize too early otherwise you may slow down the development processes unnecessarily and cause developer experience to suffer as a result.

Rights

Copyright © 2020 Josh Habdas jhabdas@protonmail.com

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.

This work incorporates fonts covered under copyright by Adobe and Sebastian Kosch. See the fonts directory for copyright and permissions notices.