glennreyes

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: require.resolve('babel-loader'),
        include: ['src'],
        options: {
          presets: [
            'dynamic-import-node',

glennreyes

# Creates a favicon.ico with ImageMagick
convert favicon.png -define icon:auto-resize=256,192,128,64,48,32,16 favicon.ico

glennreyes

Leveraging code-splitting in React apps

Why consider code split?

• Imagine regular 3G connection on mobile devices
• Seconds until first meaningful paint?
• Mobile trend

How?

• Explain import();
• Example import();

glennreyes

# Install Oh My Zsh
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Homebrew packages
brew install git
brew install java
brew install mackup

glennreyes

lerna exec --concurrency 1 --scope package -- now -t $ZEIT_TOKEN

glennreyes

Keybase proof

I hereby claim:

• I am glennreyes on github.
• I am glennreyes (https://keybase.io/glennreyes) on keybase.
• I have a public key whose fingerprint is B921 FD09 9BB6 AB54 93ED D30E E798 7280 C8EF E5AB

To claim this, I am signing this object:

glennreyes

/* @flow */
/* eslint-disable global-require, no-console */

import React from 'react';
import { render } from 'react-dom';
import Redbox from 'redbox-react';


const clearConsole = () => {
  if (typeof console.clear === 'function') {

glennreyes

Docs

• https://webpack.github.io/docs/code-splitting.html
• https://gist.github.com/sokra/27b24881210b56bbaff7#code-splitting-with-es6

Examples

• https://github.com/webpack/webpack/tree/master/examples/code-splitting
• https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194 (RRv4)

Blogs

• http://jonathancreamer.com/webpack-code-splitting-with-es6-and-babel-6/

glennreyes

const customMedia = require('./postcss/customMedia');
const customProperties = require('./postcss/customProperties');

module.exports = {
  ...
  plugins: [
    postcss: () => [
      postcss: () => [
        cssnext({ features: { customMedia, customProperties } }),
      ],

glennreyes

Progressive Webapps

Application Shell

• Progressive rendering
  • Don't show a blank screen
• Progressive enhancement

Strategies

• Server-side HTML
• React