vender体积过大原因，是第三方import形式的vue、uview、crypto加密等都会打包为一个，因此很大。
解决办法
1 cdn分离
2 分割vendor
3 压缩gzip
4 webpack-bundle-analyzer 依赖视图分析
cnpm install --save-dev webpack-bundle-analyzer
vue.config.js
module.exports = {
...
productionSourceMap: false,
lintOnSave: false, // 关闭eslint
...
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
一 分离常见的cdn资源，结合vue.config.js 中配置webpack提取常见固定不怎么改变的部分 vue、vue-router等
未成功，其余可参考
https://blog.csdn.net/qq_34191778/article/details/126202249
二 分割js为小部分js文件
image.png
更多来源参考： https://blog.csdn.net/weixin_42289080/article/details/119893347
// vue.config.js
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
configureWebpack: config => {
if (isProduction) {
// 开启分离js
config.optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
}
}
}
}
publi/index.html
如打包html未现类似图，则调整下方
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
var coverSupport =
'CSS' in window &&
typeof CSS.supports === 'function' &&
(CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') +
'" />'
)
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
三 gzip服务端配合开启，基本线上环境都开了，既节约带宽又提升加载速度，类似阿里云也会自动静态资源优化。
有时高版本会无响应报错
cnpm install --save-dev compression-webpack-plugin@3.1.0
vue.config.js
const isProduction = process.env.NODE_ENV === 'production'
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启压缩
module.exports = {
productionSourceMap: false,
configureWebpack: config => {
if (isProduction) {
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.html$|.\css/,
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
}
}
}
四 webpack-bundle-analyzer
webpack-bundle-analyzer 只是用来看下哪部分过大导致。可以修改对应或替换考虑。
image.png
网友评论