perf: chunk splitting improvements

This commit is contained in:
Pooya Parsa 2018-03-21 13:33:57 +03:30
parent 65349b7335
commit 4b26c68c3b
6 changed files with 16 additions and 81 deletions

View File

@ -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 : {})))
}

View File

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

View File

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

View File

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

View File

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

View File

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