fix(server): fix loading order of assets (#266)

Author: ambar

examples/razzle/package.json

@@ -13,6 +13,7 @@
     "@reach/router": "^1.2.1",
     "common-tags": "^1.8.0",
     "express": "^4.16.2",
+    "normalize.css": "^8.0.1",
     "razzle": "^3.0.0-alpha.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"

examples/razzle/razzle.config.js

@@ -4,7 +4,7 @@ const LoadableBabelPlugin = require('@loadable/babel-plugin')
 const babelPresetRazzle = require('razzle/babel')
 
 module.exports = {
-  modify: (config, { target }) => {
+  modify: (config, { dev, target }) => {
     const appConfig = Object.assign({}, config)
 
     if (target === 'web') {
@@ -17,6 +17,18 @@ module.exports = {
           writeToDisk: { filename },
         }),
       ]
+
+      appConfig.output.filename = dev
+        ? 'static/js/[name].js'
+        : 'static/js/[name].[chunkhash:8].js'
+
+      appConfig.optimization = Object.assign({}, appConfig.optimization, {
+        runtimeChunk: true,
+        splitChunks: {
+          chunks: 'all',
+          name: dev,
+        },
+      })
     }
 
     return appConfig

examples/razzle/src/client.js

@@ -1,3 +1,4 @@
+import 'normalize.css'
 import React from 'react'
 import { hydrate } from 'react-dom'
 import { loadableReady } from '@loadable/component'

examples/razzle/yarn.lock

@@ -5944,6 +5944,11 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"

packages/server/src/ChunkExtractor.js

@@ -293,7 +293,7 @@ class ChunkExtractor {
   // Main assets
 
   getMainAssets(scriptType) {
-    const chunks = [...this.chunks, ...this.entrypoints]
+    const chunks = [...this.entrypoints, ...this.chunks]
     const assets = this.getChunkAssets(chunks)
     if (scriptType) {
       return assets.filter(asset => asset.scriptType === scriptType)
@@ -359,7 +359,7 @@ class ChunkExtractor {
 
   getPreAssets() {
     const mainAssets = this.getMainAssets()
-    const chunks = [...this.chunks, ...this.entrypoints]
+    const chunks = [...this.entrypoints, ...this.chunks]
     const preloadAssets = this.getChunkChildAssets(chunks, 'preload')
     const prefetchAssets = this.getChunkChildAssets(chunks, 'prefetch')
     return [...mainAssets, ...preloadAssets, ...prefetchAssets]