在这里插入图片描述
虽然看上去这个内容也就2M左右的大小,但是在线上却出现需要加载10几秒的时间,这对于一个项目来说是非常的有问题的。因此解决方式如下:
首先得知道为什么这个文件比较大,chunk-vendors.xxx.js是一个保存着各种相关依赖的关系的文件,比如导入的elmentUI、echarts、vue、vue-router等各种依赖

vue项目性能优化解决方案

1.开启Gzip压缩

https://blog.csdn.net/qq_31677507/article/details/102742196

2.路由懒加载(按需加载)

3.压缩图片大小,压缩代码空间

// 使用webpack-bundle-analyzer检查打包加载的各种依赖大小与速度
cnpm install webpack-bundle-analyzer --save-dev

4.使用插件去除console、warnings、debugger等无用内容来减少文件大小

// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
// 具体使用百度

5.部分插件启用CDN加载资源

把那些不太可能改动的代码或者库分离出来,继续减小单个chunk-vendors,然后通过CDN加载进行加速加载资源。

// 修改vue.config.js 分离不常用代码库
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV === "production") {
   config.externals = { // 不会被打包的库
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'moment': 'moment'
   }
  }
 }
}
// 然后在public文件夹的index.html 使用cdn加载
<!-- CDN -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

推荐实现相关的参考博客:
1.https://www.jianshu.com/p/aebfa267f7cd
2.https://www.jb51.net/article/150533.htm
3.https://blog.csdn.net/weixin_42604828/article/details/93324751
4.https://blog.csdn.net/D102601560/article/details/109025683

前端性能优化知识总结

1.减少http请求。如:合并css、js、
2.合理利用缓存功能。如:缓存常用图片和css、js资源
3.合理安排内容渲染顺序。如:css优先加载,js最后加载,部分资源按需加载
4.压缩合并资源。如:压缩图片和js、css资源
5.减少对cookie的使用。如:cookie会在服务器和浏览器之间传递,导致资源浪费
6.优化代码层面:如:尽量减少闭包和递归的使用,减少对DOM操作,避免嵌套循环和"死循环",代码尽量低耦合高内聚,注意定时器的及时清理,能使用css完成的动画就不用js,
Logo

前往低代码交流专区

更多推荐