perf(spa): inline runtime chunk

lib/builder/webpack/client.config.mjs

@@ -6,6 +6,7 @@ import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
 import StylishPlugin from 'webpack-stylish'
 import BundleAnalyzer from 'webpack-bundle-analyzer'
+import HtmlWebpackInlineSourcePlugin from 'html-webpack-inline-source-plugin'
 
 import Debug from 'debug'
 import base from './base.config'
@@ -42,6 +43,7 @@ export default function webpackClientConfig() {
       filename: 'index.spa.html',
       template: this.options.appTemplatePath,
       inject: true,
+      inlineSource: /runtime.*\.js$/,
       chunksSortMode: 'dependency'
     })
   )
@@ -57,6 +59,10 @@ export default function webpackClientConfig() {
     )
   }
 
+  // Enhances html-webpack-plugin functionality by adding the inlineSource option.
+  // https://github.com/DustinJackson/html-webpack-inline-source-plugin
+  config.plugins.push(new HtmlWebpackInlineSourcePlugin())
+
   // Generate vue-ssr-client-manifest
   config.plugins.push(
     new VueSSRClientPlugin({

lib/core/meta.mjs

@@ -74,20 +74,22 @@ export default class MetaRenderer {
     const shouldPreload = this.options.render.bundleRenderer.shouldPreload || (() => true)
     const shouldPrefetch = this.options.render.bundleRenderer.shouldPrefetch || (() => true)
 
+    const runtimeRegex = /runtime.*\.js$/
+
     if (this.options.render.resourceHints && clientManifest) {
       const publicPath = clientManifest.publicPath || '/_nuxt/'
 
       // Preload initial resources
       if (Array.isArray(clientManifest.initial)) {
         meta.resourceHints += clientManifest.initial
-          .filter(file => shouldPreload(file))
+          .filter(file => shouldPreload(file) && !(runtimeRegex.test(file)))
           .map(
             r => `<link rel="preload" href="${publicPath}${r}" as="script" />`
           )
           .join('')
       }
 
-      // Pre-Fetch async resources
+      // Prefetch async resources
       if (Array.isArray(clientManifest.async)) {
         meta.resourceHints += clientManifest.async
           .filter(file => shouldPrefetch(file))
@@ -104,7 +106,7 @@ export default class MetaRenderer {
     // Emulate getPreloadFiles from vue-server-renderer (works for JS chunks only)
     meta.getPreloadFiles = () =>
       clientManifest.initial
-        .filter(file => shouldPreload(file))
+        .filter(file => shouldPreload(file) && !(runtimeRegex.test(file)))
         .map(r => ({
           file: r,
           fileWithoutQuery: r,

package.json

@@ -79,6 +79,7 @@
     "glob": "^7.1.2",
     "hash-sum": "^1.0.2",
     "html-minifier": "^3.5.11",
+    "html-webpack-inline-source-plugin": "^0.0.10",
     "html-webpack-plugin": "^3.0.6",
     "launch-editor-middleware": "^2.2.1",
     "lodash": "^4.17.5",

yarn.lock

@@ -2445,6 +2445,12 @@ eslint-plugin-standard@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-3.0.1.tgz#34d0c915b45edc6f010393c7eef3823b08565cf2"
 
+eslint-plugin-vue@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.3.0.tgz#478c6267269dbaa20f6e8b2cfae7a0ccc98c1d72"
+  dependencies:
+    vue-eslint-parser "^2.0.3"
+
 eslint-scope@^3.7.1, eslint-scope@~3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
@@ -3339,6 +3345,14 @@ html-tags@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
 
+html-webpack-inline-source-plugin@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-0.0.10.tgz#89bd5f761e4f16902aa76a44476eb52831c9f7f0"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    slash "^1.0.0"
+    source-map-url "^0.4.0"
+
 html-webpack-plugin@^3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.0.6.tgz#d35b0452aae129a8a9f3fac44a169a625d8cf3fa"
@@ -7395,6 +7409,17 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-eslint-parser@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
+  dependencies:
+    debug "^3.1.0"
+    eslint-scope "^3.7.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^3.5.2"
+    esquery "^1.0.0"
+    lodash "^4.17.4"
+
 vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"