perf: chunk splitting improvements

lib/builder/webpack/base.config.mjs

@@ -46,7 +46,6 @@ export default function webpackBaseConfig({ name, isServer }) {
       path: path.resolve(this.options.buildDir, 'dist'),
       filename: this.getFileName('app'),
       chunkFilename: this.getFileName('chunk'),
-      jsonpFunction: '_NXT_',
       publicPath: isUrl(this.options.build.publicPath)
         ? this.options.build.publicPath
         : urlJoin(this.options.router.base, this.options.build.publicPath)
@@ -168,13 +167,8 @@ export default function webpackBaseConfig({ name, isServer }) {
   // (We need `source-map` devtool for *.css modules)
   if (extractCSS && !this.options.dev) {
     config.plugins.push(new ExtractTextPlugin(Object.assign({
-      filename: this.getFileName('css')
-
-      // When using optimization.splitChunks and there are
-      // extracted chunks in the commons chunk,
-      // allChunks *must* be set to true
-      // TODO: For nuxt this makes duplicate css assets!
-      // allChunks: true
+      filename: this.getFileName('css'),
+      allChunks: true
     }, typeof extractCSS === 'object' ? extractCSS : {})))
   }
 

lib/builder/webpack/client.config.mjs

@@ -6,7 +6,6 @@ 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'
@@ -43,7 +42,6 @@ export default function webpackClientConfig() {
       filename: 'index.spa.html',
       template: this.options.appTemplatePath,
       inject: true,
-      inlineSource: /runtime.*\.js$/,
       chunksSortMode: 'dependency'
     })
   )
@@ -59,12 +57,6 @@ export default function webpackClientConfig() {
     )
   }
 
-  // Enhances html-webpack-plugin functionality by adding the inlineSource option.
-  // https://github.com/DustinJackson/html-webpack-inline-source-plugin
-  if (!this.options.dev) {
-    config.plugins.push(new HtmlWebpackInlineSourcePlugin())
-  }
-
   // Generate vue-ssr-client-manifest
   config.plugins.push(
     new VueSSRClientPlugin({
@@ -89,57 +81,20 @@ export default function webpackClientConfig() {
   // -- Optimization --
   config.optimization = this.options.build.optimization
 
-  // TODO: remove spa check after https://github.com/jantimon/html-webpack-plugin/issues/878 solved
-  if (this.options.dev || this.options.mode === 'spa') {
-    config.optimization.splitChunks.name = true
-  }
-
-  // ... Explicit cache groups
-
-  // Vue.js core modules
-  if (this.options.build.splitChunks.vue) {
-    config.optimization.splitChunks.cacheGroups.vue = {
-      test: /node_modules\/(vue|vue-loader|vue-router|vuex|vue-meta)\//,
-      chunks: 'initial',
-      name: 'vue',
+  // Small, known and common modules which are usually used project-wise
+  // Sum of them may not be more than 244 KiB
+  if (
+    this.options.build.splitChunks.commons === true &&
+    config.optimization.splitChunks.cacheGroups.commons === undefined
+  ) {
+    config.optimization.splitChunks.cacheGroups.commons = {
+      test: /node_modules\/(vue|vue-loader|vue-router|vuex|vue-meta|core-js|babel-runtime|es6-promise|axios|webpack|setimediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)\//,
+      chunks: 'all',
       priority: 10,
-      enforce: true
+      name: 'commons'
     }
   }
 
-  // Common modules which are usually included in projects
-  if (this.options.build.splitChunks.common) {
-    config.optimization.splitChunks.cacheGroups.common = {
-      test: /node_modules\/(core-js|babel-runtime|lodash|es6-promise|moment|axios|webpack|setimediate|timers-browserify|process)\//,
-      chunks: 'initial',
-      name: 'common',
-      priority: 9
-    }
-  }
-
-  // Generated templates
-  if (this.options.build.splitChunks.main) {
-    config.optimization.splitChunks.cacheGroups.main = {
-      test: /\.nuxt\//,
-      chunks: 'initial',
-      name: 'main',
-      priority: 8
-    }
-  }
-
-  // Other vendors inside node_modules
-  if (this.options.build.splitChunks.vendor) {
-    config.optimization.splitChunks.cacheGroups.vendor = {
-      test: /node_modules\//,
-      chunks: 'initial',
-      name: 'vendor',
-      priority: 8
-    }
-  }
-
-  // Create additional runtime chunk for cache boosting
-  config.optimization.runtimeChunk = this.options.build.splitChunks.runtime
-
   // --------------------------------------
   // Dev specific config
   // --------------------------------------

lib/common/nuxt.config.js

@@ -46,16 +46,13 @@ export default {
     optimization: {
       splitChunks: {
         chunks: 'all',
-        name: false,
         cacheGroups: {}
       }
     },
     splitChunks: {
+      layouts: false,
       pages: true,
-      vendor: true,
-      commons: true,
-      runtime: true,
-      layouts: false
+      commons: true
     },
     babel: {
       babelrc: false

lib/core/meta.mjs

@@ -74,15 +74,13 @@ 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) && !(runtimeRegex.test(file)))
+          .filter(file => shouldPreload(file))
           .map(
             r => `<link rel="preload" href="${publicPath}${r}" as="script" />`
           )
@@ -106,7 +104,7 @@ export default class MetaRenderer {
     // Emulate getPreloadFiles from vue-server-renderer (works for JS chunks only)
     meta.getPreloadFiles = () =>
       clientManifest.initial
-        .filter(file => shouldPreload(file) && !(runtimeRegex.test(file)))
+        .filter(file => shouldPreload(file))
         .map(r => ({
           file: r,
           fileWithoutQuery: r,

package.json

@@ -79,7 +79,6 @@
     "glob": "^7.1.2",
     "hash-sum": "^1.0.2",
     "html-minifier": "^3.5.12",
-    "html-webpack-inline-source-plugin": "^0.0.10",
     "html-webpack-plugin": "^3.0.7",
     "is-ci": "^1.1.0",
     "launch-editor-middleware": "^2.2.1",

yarn.lock

@@ -3273,14 +3273,6 @@ 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.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.0.7.tgz#b46074f6a76e791581ffe9bb059a72b452d99907"