Merge pull request #7645 from artsy/feature-webpack-chunking

feature: Webpack Chunking

package.json

@@ -54,7 +54,7 @@
     "test:ci:mocha": "NODE_ENV=test yarn mocha src/**/*.test.js src/**/*.test.ts",
     "type-check": "tsc",
     "unlink-all": "yalc remove --all && yarn --check-files",
-    "stats": "NODE_ENV=production BUILD_CLIENT=true node --max_old_space_size=4096 -r dotenv/config -r @babel/register node_modules/.bin/webpack --profile --json --config ./webpack > stats.json",
+    "stats:assets": "WEBPACK_STATS=normal NODE_ENV=production BUILD_CLIENT=true node --max_old_space_size=4096 -r dotenv/config -r @babel/register node_modules/.bin/webpack --profile --json --config ./webpack > stats.json",
     "storybook": "start-storybook -p 6006",
     "webpack": "node --max_old_space_size=4096 -r dotenv/config -r @babel/register node_modules/.bin/webpack --config ./webpack"
   },
@@ -110,7 +110,6 @@
     "cheerio": "0.22.0",
     "classnames": "2.2.6",
     "compression": "1.7.2",
-    "concurrently": "3.5.1",
     "connect-timeout": "1.9.0",
     "cookie-parser": "1.4.3",
     "cookie-session": "2.0.0-beta.3",

src/v2/Apps/Artist/artistRoutes.tsx

@@ -59,30 +59,56 @@ graphql`
   }
 `
 
-const ArtistApp = loadable(() => import("./ArtistApp"), {
-  resolveComponent: component => component.ArtistAppFragmentContainer,
-})
-const OverviewRoute = loadable(() => import("./Routes/Overview"), {
-  resolveComponent: component => component.OverviewRouteFragmentContainer,
-})
-const WorksForSaleRoute = loadable(() => import("./Routes/Works"), {
-  resolveComponent: component => component.WorksRouteFragmentContainer,
-})
-const AuctionResultsRoute = loadable(() => import("./Routes/AuctionResults"), {
-  resolveComponent: component => component.AuctionResultsRouteFragmentContainer,
-})
-const ConsignRoute = loadable(() => import("./Routes/Consign"), {
-  resolveComponent: component => component.ConsignRouteFragmentContainer,
-})
-const CVRoute = loadable(() => import("./Routes/CV"), {
-  resolveComponent: component => component.CVRouteFragmentContainer,
-})
-const ArticlesRoute = loadable(() => import("./Routes/Articles"), {
-  resolveComponent: component => component.ArticlesRouteFragmentContainer,
-})
-const ShowsRoute = loadable(() => import("./Routes/Shows"), {
-  resolveComponent: component => component.ShowsRouteFragmentContainer,
-})
+const ArtistApp = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./ArtistApp"),
+  {
+    resolveComponent: component => component.ArtistAppFragmentContainer,
+  }
+)
+const OverviewRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Overview"),
+  {
+    resolveComponent: component => component.OverviewRouteFragmentContainer,
+  }
+)
+const WorksForSaleRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Works"),
+  {
+    resolveComponent: component => component.WorksRouteFragmentContainer,
+  }
+)
+const AuctionResultsRoute = loadable(
+  () =>
+    import(/* webpackChunkName: "artistBundle" */ "./Routes/AuctionResults"),
+  {
+    resolveComponent: component =>
+      component.AuctionResultsRouteFragmentContainer,
+  }
+)
+const ConsignRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Consign"),
+  {
+    resolveComponent: component => component.ConsignRouteFragmentContainer,
+  }
+)
+const CVRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/CV"),
+  {
+    resolveComponent: component => component.CVRouteFragmentContainer,
+  }
+)
+const ArticlesRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Articles"),
+  {
+    resolveComponent: component => component.ArticlesRouteFragmentContainer,
+  }
+)
+const ShowsRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Shows"),
+  {
+    resolveComponent: component => component.ShowsRouteFragmentContainer,
+  }
+)
 
 // Artist pages tend to load almost instantly, so just preload it up front
 if (typeof window !== "undefined") {

src/v2/Apps/ArtistSeries/artistSeriesRoutes.tsx

@@ -5,9 +5,12 @@ import { paramsToCamelCase } from "v2/Components/ArtworkFilter/Utils/urlBuilder"
 import { getENV } from "v2/Utils/getENV"
 import { allowedFilters } from "v2/Components/ArtworkFilter/Utils/allowedFilters"
 
-const ArtistSeriesApp = loadable(() => import("./ArtistSeriesApp"), {
-  resolveComponent: component => component.ArtistSeriesAppFragmentContainer,
-})
+const ArtistSeriesApp = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./ArtistSeriesApp"),
+  {
+    resolveComponent: component => component.ArtistSeriesAppFragmentContainer,
+  }
+)
 
 export const artistSeriesRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Artists/artistsRoutes.tsx

@@ -2,16 +2,23 @@ import loadable from "@loadable/component"
 import { graphql } from "react-relay"
 import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
-const ArtistsApp = loadable(() => import("./ArtistsApp"), {
-  resolveComponent: component => component.ArtistsApp,
-})
+const ArtistsApp = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./ArtistsApp"),
+  {
+    resolveComponent: component => component.ArtistsApp,
+  }
+)
 
-const ArtistsIndexRoute = loadable(() => import("./Routes/ArtistsIndex"), {
-  resolveComponent: component => component.ArtistsIndexFragmentContainer,
-})
+const ArtistsIndexRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/ArtistsIndex"),
+  {
+    resolveComponent: component => component.ArtistsIndexFragmentContainer,
+  }
+)
 
 const ArtistsByLetterRoute = loadable(
-  () => import("./Routes/ArtistsByLetter"),
+  () =>
+    import(/* webpackChunkName: "artistBundle" */ "./Routes/ArtistsByLetter"),
   {
     resolveComponent: component => component.ArtistsByLetterFragmentContainer,
   }

src/v2/Apps/Artwork/Components/ArtworkDetails/index.tsx

@@ -117,7 +117,6 @@ export const ArtworkDetailsQueryRenderer = ({
   artworkID: string
 }) => {
   const { relayEnvironment } = useContext(SystemContext)
-
   return (
     <QueryRenderer<ArtworkDetailsQuery>
       environment={relayEnvironment}

src/v2/Apps/Artwork/artworkRoutes.tsx

@@ -2,9 +2,12 @@ import loadable from "@loadable/component"
 import { graphql } from "react-relay"
 import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
-const ArtworkApp = loadable(() => import("./ArtworkApp"), {
-  resolveComponent: component => component.ArtworkAppFragmentContainer,
-})
+const ArtworkApp = loadable(
+  () => import(/* webpackChunkName: "artworkBundle" */ "./ArtworkApp"),
+  {
+    resolveComponent: component => component.ArtworkAppFragmentContainer,
+  }
+)
 
 export const artworkRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Auction/auctionRoutes.tsx

@@ -9,15 +9,25 @@ import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
 const logger = createLogger("Apps/Auction/routes")
 
-const AuctionFAQRoute = loadable(() => import("./Components/AuctionFAQ"), {
-  resolveComponent: component => component.AuctionFAQFragmentContainer,
-})
-const ConfirmBidRoute = loadable(() => import("./Routes/ConfirmBid"), {
-  resolveComponent: component => component.ConfirmBidRouteFragmentContainer,
-})
-const RegisterRoute = loadable(() => import("./Routes/Register"), {
-  resolveComponent: component => component.RegisterRouteFragmentContainer,
-})
+const AuctionFAQRoute = loadable(
+  () =>
+    import(/* webpackChunkName: "auctionBundle" */ "./Components/AuctionFAQ"),
+  {
+    resolveComponent: component => component.AuctionFAQFragmentContainer,
+  }
+)
+const ConfirmBidRoute = loadable(
+  () => import(/* webpackChunkName: "auctionBundle" */ "./Routes/ConfirmBid"),
+  {
+    resolveComponent: component => component.ConfirmBidRouteFragmentContainer,
+  }
+)
+const RegisterRoute = loadable(
+  () => import(/* webpackChunkName: "auctionBundle" */ "./Routes/Register"),
+  {
+    resolveComponent: component => component.RegisterRouteFragmentContainer,
+  }
+)
 
 export const auctionRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Auctions/auctionsRoutes.tsx

@@ -5,9 +5,12 @@ import { CurrentAuctionsPaginationContainer } from "./Routes/CurrentAuctions"
 import { PastAuctionsPaginationContainer } from "./Routes/PastAuctions"
 import { UpcomingAuctionsPaginationContainer } from "./Routes/UpcomingAuctions"
 
-const AuctionsApp = loadable(() => import("./AuctionsApp"), {
-  resolveComponent: component => component.AuctionsAppFragmentContainer,
-})
+const AuctionsApp = loadable(
+  () => import(/* webpackChunkName: "auctionBundle" */ "./AuctionsApp"),
+  {
+    resolveComponent: component => component.AuctionsAppFragmentContainer,
+  }
+)
 
 export const auctionsRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/BuyerGuarantee/buyerGuaranteeRoutes.tsx

@@ -2,12 +2,18 @@ import loadable from "@loadable/component"
 import { graphql } from "react-relay"
 import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
-const BuyerGuaranteeApp = loadable(() => import("./BuyerGuaranteeApp"), {
-  resolveComponent: component => component.BuyerGuaranteeApp,
-})
+const BuyerGuaranteeApp = loadable(
+  () => import(/* webpackChunkName: "buyerBundle" */ "./BuyerGuaranteeApp"),
+  {
+    resolveComponent: component => component.BuyerGuaranteeApp,
+  }
+)
 
 const BuyerGuaranteeIndexRoute = loadable(
-  () => import("./Routes/BuyerGuaranteeIndex"),
+  () =>
+    import(
+      /* webpackChunkName: "buyerBundle" */ "./Routes/BuyerGuaranteeIndex"
+    ),
   {
     resolveComponent: component =>
       component.BuyerGuaranteeIndexFragmentContainer,

src/v2/Apps/Collect/collectRoutes.tsx

@@ -7,15 +7,24 @@ import { paramsToCamelCase } from "v2/Components/ArtworkFilter/Utils/urlBuilder"
 import { getENV } from "v2/Utils/getENV"
 import { CollectionAppQuery } from "./Routes/Collection/CollectionAppQuery"
 
-const CollectApp = loadable(() => import("./Routes/Collect"), {
-  resolveComponent: component => component.CollectAppFragmentContainer,
-})
-const CollectionsApp = loadable(() => import("./Routes/Collections"), {
-  resolveComponent: component => component.CollectionsAppFragmentContainer,
-})
-const CollectionApp = loadable(() => import("./Routes/Collection"), {
-  resolveComponent: component => component.CollectionRefetchContainer,
-})
+const CollectApp = loadable(
+  () => import(/* webpackChunkName: "collectBundle" */ "./Routes/Collect"),
+  {
+    resolveComponent: component => component.CollectAppFragmentContainer,
+  }
+)
+const CollectionsApp = loadable(
+  () => import(/* webpackChunkName: "collectBundle" */ "./Routes/Collections"),
+  {
+    resolveComponent: component => component.CollectionsAppFragmentContainer,
+  }
+)
+const CollectionApp = loadable(
+  () => import(/* webpackChunkName: "collectBundle" */ "./Routes/Collection"),
+  {
+    resolveComponent: component => component.CollectionRefetchContainer,
+  }
+)
 
 export const collectRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Consign/consignRoutes.tsx

@@ -3,14 +3,23 @@ import { graphql } from "react-relay"
 import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
 const MarketingLandingApp = loadable(
-  () => import("./Routes/MarketingLanding/MarketingLandingApp"),
+  () =>
+    import(
+      /* webpackChunkName: "consignBundle" */ "./Routes/MarketingLanding/MarketingLandingApp"
+    ),
   {
     resolveComponent: component => component.MarketingLandingApp,
   }
 )
-const OfferDetailApp = loadable(() => import("./Routes/Offer/OfferDetailApp"), {
-  resolveComponent: component => component.OfferDetailAppFragmentContainer,
-})
+const OfferDetailApp = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "consignBundle" */ "./Routes/Offer/OfferDetailApp"
+    ),
+  {
+    resolveComponent: component => component.OfferDetailAppFragmentContainer,
+  }
+)
 
 export const consignRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Conversation/conversationRoutes.tsx

@@ -8,10 +8,16 @@ export const conversationRoutes: AppRouteConfig[] = [
     displayFullPage: true,
     hideFooter: true,
     getComponent: () =>
-      loadable(() => import("./ConversationApp"), {
-        resolveComponent: component =>
-          component.ConversationAppFragmentContainer,
-      }),
+      loadable(
+        () =>
+          import(
+            /* webpackChunkName: "conversationBundle" */ "./ConversationApp"
+          ),
+        {
+          resolveComponent: component =>
+            component.ConversationAppFragmentContainer,
+        }
+      ),
     query: graphql`
       query conversationRoutes_ConversationQuery {
         me {
@@ -32,7 +38,7 @@ export const conversationRoutes: AppRouteConfig[] = [
     path: "/user/conversations/:conversationID",
     displayFullPage: true,
     hideFooter: true,
-    Component: loadable(() => import("./Routes/Conversation"), {
+    Component: loadable(() => import(/* webpackChunkName: "conversationBundle" */ "./Routes/Conversation"), {
       resolveComponent: component => component.ConversationPaginationContainer,
     }),
     prepareVariables: (params, _props) => {

src/v2/Apps/Example/exampleRoutes.tsx

@@ -3,18 +3,18 @@ import { AppRouteConfig } from "v2/Artsy/Router/Route"
 import { graphql } from "react-relay"
 import { WelcomeRoute } from "./Routes/Welcome/WelcomeRoute"
 
-const ExampleApp = loadable(() => import("./ExampleApp"), {
+const ExampleApp = loadable(() => import(/* webpackChunkName: "exampleBundle" */ "./ExampleApp"), {
   resolveComponent: component => component.ExampleAppFragmentContainer,
 })
 const ArtistRoute = loadable(
-  () => import("./Routes/Artist/ExampleArtistRoute"),
+  () => import/* webpackChunkName: "exampleBundle" */ ("./Routes/Artist/ExampleArtistRoute"),
   {
     resolveComponent: component =>
       component.ExampleArtistRouteFragmentContainer,
   }
 )
 const ArtworkRoute = loadable(
-  () => import("./Routes/Artwork/ExampleArtworkRoute"),
+  () => import(/* webpackChunkName: "exampleBundle" */ "./Routes/Artwork/ExampleArtworkRoute"),
   {
     resolveComponent: component =>
       component.ExampleArtworkRouteFragmentContainer,