perf(spa): inline runtime chunk

This commit is contained in:
Pooya Parsa 2018-03-20 13:39:47 +03:30
parent 342d9a8bf6
commit 6a68e381b6
4 changed files with 37 additions and 3 deletions

View File

@ -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({

View File

@ -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,

View File

@ -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",

View File

@ -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"