我已將我的應用程式從webpack升級到[email protected]。但是，我在生產構建輸出中得到了不同大小和不同數量的塊。
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')
})
},
}輸出如下：
輸出-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.
輸出 2（預期）
? 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.
我也嘗試過克隆新鮮的回購。但有時它有預期的結果，大多數時候它有意想不到的輸出。
差異
- 內置大小不同（輸出 2： 4.15 MiB）和（輸出 1： 6.82 MiB）
- 塊數不同（Output-2： 12-CSS，18-JS）和（Output-1： 3-CSS，3-JS）
- 使用 Output-1，生產版本不接受.env.production配置
uj5u.com熱心網友回復：
從 webpack build 更新到 vue-cli build 后出現問題。我已經通過洗掉舊的靜態檔案夾來修復。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/474858.html
標籤：javascript Vue.js 网页包 Vue-cli webpack-splitchunks
上一篇：使用v-bind:hrefrequire()時，Vue3組件不會在生產中呈現
下一篇：Webpack無法解釋檔案？