哈喽大家好，我是一名软件工程专业的在校生，第一次做完整的前后端分离项目，第一次把网站上线。
当我开心地在浏览器输入地址，但访问首页要8秒多好慢啊！！！
打开控制台排查原因，
首页加载大概8.7M左右的资源，服务器带宽10Mbps 加载速度理论是 8.7 * 1024 /128 /10 = 7 s 左右,加载速度正常，所以服务器运行正常。
发现主要原因是chunk-vendors.js文件太大，导致加载速度慢。
首先清理了一下用不到的依赖和配置
访问速度缩短为
4.4秒
接着在网上查阅资料，
第一个方案是 使用optimization.splitChunks做分包
需要修改vue.config.js文件
optimization: {
// 将运行时代码提取为单独的 chunk，以便更好地利用缓存
runtimeChunk: 'single',
// 将第三方库和业务代码分割到不同的 chunk 中，以便更好地利用浏览器的并行加载机制
splitChunks: {
chunks: 'all', // 表示对所有模块进行代码分割
maxInitialRequests: Infinity, // 没有最大的初始化请求限制
minSize: 20000, // 模块的最小大小，小于此值的模块不会被拆分
maxSize: 60000, // 模块的最大大小，大于此值的模块会被拆分
cacheGroups: {
vendors: {
// 指定匹配的模块来源
test: /[\/]node_modules[\/]/,
// 设置优先级，防止和自定义的公共模块提取时被覆盖，值越大优先级越高
priority: -10,
// 重命名提取出来的 chunk 名，此处取自 node_modules 文件夹下的模块名
name(module) {
const match = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/);
if (match && match[1]) {
const packageName = match[1];
return `npm.${packageName.replace('@', '')}`;
}
// 如果匹配失败或者没有匹配结果，则返回一个默认的名称
return 'vendor';
},
},
},
},
},
相比最开始全部加载时间还是有进步的，不过比清理依赖和配置变化不大（全部加载时间没记录，应该也就几百毫秒•ᴗ•💧）
原理我猜和删除node_modules速度慢差不多...我猜的
但是还是有点慢，继续优化！
第二个方案是压缩代码，同时需要修改nginx配置
安装compression-webpack-plugin插件。
yarn add compression-webpack-plugin --save-dev
前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。
需要修改vue.config.js文件
configureWebpack: {
plugins: [
new CompressionPlugin({
// 压缩后的文件名
filename: '[path][base].gz',
// 压缩算法，这里使用gzip
algorithm: 'gzip',
// 匹配需要压缩的文件类型，这里匹配js和css文件
test: new RegExp(
'\.(js|css|jpg|jpeg|png|gif|svg)$'
),
// 只有文件大小大于等于这个值的文件才会被压缩，单位是字节，默认为0
threshold: 10240, // 10 KB
// 压缩率，只有压缩率达到或超过这个值的文件才会被压缩，默认是0.8
minRatio: 0.8,
}),
],
},
需要修改nginx.config文件,读取压缩后的文件
server {
gzip on; // 开启gzip压缩
gzip_min_length 1k; // 只压缩大于1KB的文件
gzip_comp_level 9; // 压缩级别，级别越高压缩率越高，但消耗CPU资源也越多
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; // 指定需要进行gzip压缩的文件类型
gzip_vary on; // 根据Accept-Encoding请求头决定是否启用压缩，防止CDN缓存问题
gzip_disable "MSIE [1-6]\."; // 禁用gzip压缩的浏览器类型，这里禁用了IE6及以下的浏览器
// 其余配置
}
访问速度缩短为542毫秒，1秒以内！
综合使用前面的两种方法，发现🖌️🐍🍩⚽，表现效果还是
纯压缩最好。
还有什么解决方案呢？
还可以使用
CDN继续优化，得加钱...
提升了多少呢？问一下豆包同学吧；
好啦，标题也有了哈哈(๑•̀ㅂ•́)و✧
本篇文章到此结束🔚
