isacjunior

import React from 'react'
import BrowserRouter from 'react-router-dom/BrowserRouter'
import Route from 'react-router-dom/Route'
import Switch from 'react-router-dom/Switch'
import LazyImport from './Components/LazyImport'

// Precisamos informar ao webpack qual o nome que ele dará a cada chunk, por isso esta notação.

const Nav = LazyImport({
  loader: () => import('./Components/Nav'/* webpackChunkName: 'nav' */),

isacjunior

                          Asset       Size   Chunks             Chunk Names
    app.5ff6f4e51f93d1b833c6.js   41.3 KiB      app  [emitted]  app
   main.5ff6f4e51f93d1b833c6.js  937 bytes     main  [emitted]  main
    nav.5ff6f4e51f93d1b833c6.js  927 bytes      nav  [emitted]  nav
  other.5ff6f4e51f93d1b833c6.js  947 bytes    other  [emitted]  other
vendors.5ff6f4e51f93d1b833c6.js   1.14 MiB  vendors  [emitted]  vendors
                     index.html  457 bytes           [emitted]  

isacjunior

import React, { Fragment } from 'react'
import BrowserRouter from 'react-router-dom/BrowserRouter'
import Route from 'react-router-dom/Route'
import Switch from 'react-router-dom/Switch'
import Nav from './Components/Nav'
import Main from './Components/Main'
import Other from './Components/Other'

const Routes = () => (
  <BrowserRouter>

isacjunior

import React from 'react'
import Loadable from 'react-loadable'

const LoadingComponent = () => <div>Loading...</div>

const LazyImport = opts => Loadable({
  ...opts,
  loading: LoadingComponent,
})

isacjunior

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

isacjunior

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }

isacjunior

                          Asset       Size   Chunks             Chunk Names
    app.95718d41dd0b15090ab8.js   38.7 KiB      app  [emitted]  app
vendors.95718d41dd0b15090ab8.js   1.13 MiB  vendors  [emitted]  vendors
                     index.html  457 bytes           [emitted]  
                     

isacjunior

                      Asset       Size  Chunks             Chunk Names
app.2930dd9936b8f0f19840.js   1.17 MiB     app  [emitted]  app
                 index.html  378 bytes          [emitted]  

isacjunior

// src/styled.js
import styled from 'styled-components'

export const HomeContainer = styled.View`
  flex: 1;
  background-color: rgb(109, 33, 119);
`

export const SwiperContainer = styled.View`
  flex: 1;

isacjunior

// src/index.js
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { BottomNavigator } from './components'
import { HomeContainer, SwiperContainer } from './styled'

class App extends Component {
  render() {
    return (
      <HomeContainer>