mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
perf: chunk splitting improvements
This commit is contained in:
parent
65349b7335
commit
4b26c68c3b
@ -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 : {})))
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
// --------------------------------------
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user