哈喽大家好，我是一名软件工程专业的在校生，第一次做完整的前后端分离项目，第一次把网站上线。
当我开心地在浏览器输入地址，但访问首页要8秒多好慢啊！！！
打开控制台发现主要原因是chunk-vendors.js文件太大，导致加载速度慢
接着在网上查阅资料，
第一个方案是 使用optimization.splitChunks做分包
需要修改vue.config.js文件
configureWebpack: {
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 packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('@', '')}`;
},
},
},
},
},
}),
访问速度缩短为4.4秒
但是还是有点慢，继续优化！
第二个方案是压缩代码，同时需要修改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)$'
),
// 只有文件大小大于等于这个值的文件才会被压缩，单位是字节，默认为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继续优化，或者综合使用前面的两种方法。
提升了多少呢？问一下同学吧；
好啦，标题也有了哈哈(๑•̀ㅂ•́)و✧
本篇文章到此结束🔚