I've upgraded my application from webpack to [email protected]. But, I'm getting different size and different numbers of chunk in production build output.
vue.config.js
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'Product Title' // page title
const port = process.env.port || process.env.npm_config_port || 9527 // dev port
module.exports = {
runtimeCompiler: true,
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false,
devServer: {
host: 'project.localhost',
disableHostCheck: false,
port: port,
https: true,
open: true,
compress: true,
overlay: {
warnings: false,
errors: true,
},
},
css: { extract: true },
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src'),
},
},
},
chainWebpack(config) {
config.plugin('html').tap((args) => {
args[0].filename = 'index.html'
args[0].template = 'index.html'
args[0].favicon = resolve('favicon.ico')
args[0].title = 'Product Title'
args[0].templateParameters = {
BASE_URL: '/static',
}
return args
})
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial',
},
])
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch')
// thumbnail url loader
config.module
.rule('images')
.exclude.add(resolve('src/icons'))
.end()
.use('url-loader')
.tap((options) => {
options.limit = 10000
return options
})
// set svg-sprite-loader
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end()
config.when(process.env.NODE_ENV !== 'development', (config) => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/,
},
])
.end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial', // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true,
},
},
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
})
},
}And the Output is following:
OUTPUT-1
⠏ Building for dev...
WARNING Compiled with 3 warnings 3:32:20 PM
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
static/img/fa-brands-400.1d5619cd.svg (730 KiB)
static/img/fa-solid-900.37bc7099.svg (897 KiB)
static/img/fontawesome-webfont.912ec66d.svg (434 KiB)
static/js/app.57cf5156.js (857 KiB)
static/js/chunk-elementUI.2bd32906.js (698 KiB)
static/js/chunk-libs.b0b64aa5.js (4.87 MiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (6.89 MiB)
static/css/chunk-elementUI.68c70ad5.css
static/js/chunk-elementUI.2bd32906.js
static/css/chunk-libs.99e7fe66.css
static/js/chunk-libs.b0b64aa5.js
static/css/app.e4736649.css
static/js/app.57cf5156.js
warning
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
File Size Gzipped
dist/static/js/chunk-libs.b0b64aa5.js 4987.71 KiB 1731.28 KiB
dist/static/js/app.57cf5156.js 856.52 KiB 254.17 KiB
dist/static/js/chunk-elementUI.2bd32906.js 697.86 KiB 170.93 KiB
dist/static/css/chunk-elementUI.68c70ad5.css 227.82 KiB 34.54 KiB
dist/static/css/chunk-libs.99e7fe66.css 190.53 KiB 38.37 KiB
dist/static/css/app.e4736649.css 98.98 KiB 19.17 KiB
Images and other types of assets omitted.
OUTPUT-2 (Expected)
⠼ Building for dev...
WARNING Compiled with 2 warnings 2:53:57 PM
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
static/img/fa-brands-400.1d5619cd.svg (730 KiB)
static/img/fa-solid-900.37bc7099.svg (897 KiB)
static/img/fontawesome-webfont.912ec66d.svg (434 KiB)
static/js/chunk-20bce5cc.30df4307.js (995 KiB)
static/js/chunk-57fa210c.c3888579.js (1.07 MiB)
static/js/chunk-a65568da.4fdf6ed9.js (338 KiB)
static/js/chunk-elementUI.4a643ef0.js (698 KiB)
static/js/chunk-libs.00525053.js (2.83 MiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (4.15 MiB)
static/css/chunk-elementUI.68c70ad5.css
static/js/chunk-elementUI.4a643ef0.js
static/css/chunk-libs.8f8abf3a.css
static/js/chunk-libs.00525053.js
static/css/app.d7f6f6a5.css
static/js/app.c079bf5b.js
File Size Gzipped
dist/static/js/chunk-libs.00525053.js 2898.95 KiB 1040.47 KiB
dist/static/js/chunk-57fa210c.c3888579.js 1091.28 KiB 457.60 KiB
dist/static/js/chunk-20bce5cc.30df4307.js 994.52 KiB 211.99 KiB
dist/static/js/chunk-elementUI.4a643ef0.js 697.86 KiB 170.93 KiB
dist/static/js/chunk-a65568da.4fdf6ed9.js 337.52 KiB 86.54 KiB
dist/static/js/app.c079bf5b.js 211.37 KiB 62.93 KiB
dist/static/js/chunk-31981e0b.7613ba04.js 193.49 KiB 65.62 KiB
dist/static/js/chunk-60d45dd8.839e76cd.js 61.93 KiB 14.38 KiB
dist/static/js/chunk-3414ce86.37c45259.js 31.89 KiB 5.23 KiB
dist/static/js/chunk-b5efe21a.a3395984.js 7.96 KiB 5.78 KiB
dist/static/js/chunk-2d229048.78f49061.js 5.97 KiB 1.79 KiB
dist/static/js/chunk-6a52c0e3.a3d9d20a.js 3.24 KiB 1.30 KiB
dist/static/js/chunk-2d0d05e9.65c51df1.js 2.73 KiB 1.15 KiB
dist/static/js/chunk-be8bf048.fd1f66f4.js 2.05 KiB 0.77 KiB
dist/static/js/chunk-c17e5704.f75ec1f8.js 1.59 KiB 0.86 KiB
dist/static/js/chunk-4dd1ff3c.ee95460a.js 0.93 KiB 0.53 KiB
dist/static/js/chunk-595d9256.91c103e6.js 0.90 KiB 0.49 KiB
dist/static/js/chunk-2d0f0fdf.cb0ff0f4.js 0.47 KiB 0.34 KiB
dist/static/css/chunk-elementUI.68c70ad5.css 227.82 KiB 34.54 KiB
dist/static/css/chunk-libs.8f8abf3a.css 184.58 KiB 37.35 KiB
dist/static/css/chunk-595d9256.8fe9727b.css 32.46 KiB 5.97 KiB
dist/static/css/app.d7f6f6a5.css 27.21 KiB 5.77 KiB
dist/static/css/chunk-a65568da.8c917c68.css 16.77 KiB 4.25 KiB
dist/static/css/chunk-31981e0b.86a967f6.css 15.52 KiB 4.04 KiB
dist/static/css/chunk-57fa210c.bda1da5f.css 5.95 KiB 1.36 KiB
dist/static/css/chunk-b5efe21a.664d5134.css 4.65 KiB 0.83 KiB
dist/static/css/chunk-60d45dd8.c1d37798.css 4.08 KiB 1.35 KiB
dist/static/css/chunk-3414ce86.5b57b7c1.css 1.91 KiB 0.70 KiB
dist/static/css/chunk-c17e5704.e29807c0.css 0.71 KiB 0.28 KiB
dist/static/css/chunk-6a52c0e3.1f0ed01a.css 0.05 KiB 0.07 KiB
Images and other types of assets omitted.
I've tried by cloning fresh repo too. But sometimes it has expected result and most of the time it has unexpected output.
DIFFERENCES
- Built size is different (Output-2: 4.15 MiB) & (Output-1: 6.82 MiB)
- Number of Chunks are different (Output-2: 12-CSS, 18-JS) & (Output-1: 3-CSS, 3-JS)