由于webpack默认生成一个chunk.js文件,导致该文件可能导致该文件体积过大,首次加载的时候耗时太长,对用户不友好。
解决:
- 压缩
- 分包
压缩
使用compressionPlugin
插件压缩:
- vue.config.js:
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
// webpack配置: 对内部的 webpack 配置进行更细粒度的修改
chainWebpack: (config) => {
// config.plugins.delete("prefetch"); //默认开启prefetch(预先加载模块),提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件,都一口气下载了 所以我们要关闭这个功能模块
// 对超过1Mb的文件gzip压缩
config.plugin("compressionPlugin").use(
new CompressionWebpackPlugin({
test: /\.(js|css|html|png|gif)$/, // 匹配文件名
threshold: 1024000
})
);
}
})
- 还需要再所部署的服务上对gz文件进行适配,以node为例
app.js
var express = require('express');
var compression = require('compression')
var app = express();
app.use(compression()); // 支持.gz文件
分包
分包: 将node_modules文件夹下的所有组件,根据大小进行分包, 超过300k进行分包,小于100k的不进行分包。
(设置多个入口文件也有助于分包)
- vue.config.js:
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
configureWebpack: {
// 分包: 将node_modules文件夹下的所有组件,根据大小进行分包, 超过300k进行分包,小于100k的不进行分包。
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageMatch = module.context.replace(/\\/, "\\").match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
);
const packageName = (packageMatch && packageMatch[1]) || `test${(Math.random() * 100).toFixed(0)}}`
return `npm.${packageName.replace("@", "")}`;
},
chunks: "all",
enforce: true,
priority: 10,
minSize: 100000, // 100KB
maxSize: 300000,
reuseExistingChunk: true
}
}
}
}
},
})