Code splitting

Author: alfonsogarciacaro

.gitignore

@@ -9,3 +9,4 @@ bin/
 output/
 .fake/
 temp/
+.idea/

package-lock.json

@@ -12,7 +12,7 @@
     "bulma": "^0.7.4",
     "bulma-pageloader": "^2.1.0",
     "lowdb": "^1.0.0",
-    "marked": "^0.6.1",
+    "marked": "^0.6.2",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "showdown": "^1.9.0"
@@ -24,7 +24,7 @@
     "copy-webpack-plugin": "^5.0.2",
     "core-js": "^3.0.0",
     "css-loader": "^2.1.1",
-    "fable-compiler": "^2.2.0",
+    "fable-compiler": "^2.3.0-beta-001",
     "fable-loader": "^2.1.5",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",

package.json

@@ -18,7 +18,7 @@ NUGET
       Fable.Browser.Event (>= 1.0.0-alpha-001)
       Fable.Core (>= 2.1.0-alpha-002)
       FSharp.Core (>= 4.5.2)
-    Fable.Core (3.0.0-beta-005)
+    Fable.Core (3.0.0-beta-006)
       FSharp.Core (>= 4.5.2)
     Fable.Elmish (3.0.0-beta-7)
       Fable.Core (>= 3.0.0-beta-004)
@@ -53,8 +53,9 @@ NUGET
     Fable.Promise (2.0.0-beta-001)
       Fable.Core (>= 3.0.0-beta-002)
       FSharp.Core (>= 4.5.2)
-    Fable.React (5.0.0-beta-001)
+    Fable.React (5.0.0-beta-007)
       Fable.Browser.Dom (>= 1.0.0-alpha-004)
+      Fable.Core (>= 3.0.0-beta-006)
       FSharp.Core (>= 4.5.2)
     FSharp.Core (4.6.2) - redirects: force
     Fulma (2.0.0-beta-003)

paket.lock

@@ -1,14 +1,23 @@
 module Question.Dispatcher.View
 
+open Fable.React
 open Types
 
+let QuestionShow =
+    LazyComponent.FromExternalFunction(
+        Question.Show.View.root,
+        div [] [str "Loading..."])
+
 let root user model dispatch =
     match model with
     | { CurrentPage = Router.QuestionPage.Index
         IndexModel = Some extractedModel } -> Question.Index.View.root extractedModel (IndexMsg >> dispatch)
 
     | { CurrentPage = Router.QuestionPage.Show _
-        ShowModel = Some extractedModel } -> Question.Show.View.root user extractedModel (ShowMsg >> dispatch)
+        ShowModel = Some extractedModel } ->
+            QuestionShow {| user = user
+                            model = extractedModel
+                            dispatch = ShowMsg >> dispatch |}
 
     | { CurrentPage = Router.QuestionPage.Create
         CreateModel = Some extractedModel } -> Question.Create.View.root user extractedModel (CreateMsg >> dispatch)

src/Question/Dispatcher/View.fs

@@ -77,10 +77,12 @@ let private pageContent user question model dispatch =
           questionsView question model.Answers dispatch
           replyView user model dispatch ]
 
-let root user model dispatch =
-    match model.Question with
+let root (props: {| user: User
+                    model: Model
+                    dispatch: Msg->unit |}) =
+    match props.model.Question with
     | Some question ->
-        pageContent user question model dispatch, false
+        pageContent props.user question props.model props.dispatch, false
     | None -> div [ ] [ ], true
     |> (fun (pageContent, isLoading) ->
         Container.container [ ]

src/Question/Show/View.fs

@@ -68,16 +68,8 @@ module.exports = {
     mode: isProduction ? "production" : "development",
     devtool: isProduction ? "source-map" : "eval-source-map",
     optimization: {
-        // Split the code coming from npm packages into a different file.
-        // 3rd party dependencies change less often, let the browser cache them.
         splitChunks: {
-            cacheGroups: {
-                commons: {
-                    test: /node_modules/,
-                    name: "vendors",
-                    chunks: "all"
-                }
-            }
+            chunks: "all"
         },
     },
     // Besides the HtmlPlugin, we use the following plugins: