哈喽大家好,我是一名软件工程专业的在校生,第一次做完整的前后端分离项目,第一次把网站上线。
当我开心地在浏览器输入地址,但访问首页要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
继续优化,或者综合使用前面的两种方法。
提升了多少呢?问一下同学吧;
好啦,标题也有了哈哈(๑•̀ㅂ•́)و✧
本篇文章到此结束🔚