一次vue项目优化的实际操作记录
前言
项目前端优化是我们经常需要去做的事情，今天我们就来记录下我的实际操作。
一、CDN引入
这是一个常态化的操作了，主要是让我们通过npm下载依赖包和import引入的文件，变成线上使用，减少打包后的文件大小。比如常用的vue、ElementUI、vuex、vue-router、axios等等一些常用的
首先在index.html文件引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>然后注释掉import引入的
一定要把Vue.use(ElementUI)注释
第三步，找到webpack.base.conf.js文件，在下面添加你CDN引入的依赖
vuex的store/store.js文件里面修改
router文件也需要修改
坑：
1.一定要先引入vue的，然后再加其他的，不然会报错，找不到elementUI的标签名；
2.不能只引入elementUI，不引入vue，一样会报错；
3.我引入的vue-router的CDN，在抓包的时候发现居然要四点多秒种才下载完成，所以我就去掉了，我不知道你们会不会，可以先试试。
二、gzip压缩
首先安装一个插件
npm install --save-dev compression-webpack-plugin
然后在config/index.js里面开启
然后在webpack.prod.conf.js，找到这段代码
最后就是后端配置的问题
浏览器查看请求头，有下面这些标志就是开启成功了
三、路由懒加载，这种最简单的了就不多说了
const production = () => import('@/components/view/production/production')
{
name: '123123',
path: 'production',
component: production
},四、打包不生成map文件
config/index.js productionSourceMap: false,
五、router上面使用props传参数，导致页面加载时间很长
我在优化一个项目的时候，里面有一个单点登陆的功能页面。这个需要通过路由传参数，但是在首次进入页面的时候，浏览器捉包发现第一次请求的时候，打包的css一直被挂载长达将近20秒。
从发现这个问题开始，我一直以为是因为css文件太多，但是也就四百多kb，但是也对css文件进行各种的优化，拆分、减少背景图片的引入等等，甚至使用了CDN引入了某些css文件，减少到两百多kb最后还是一样的问题，就觉得不是这个问题。
最后我们测试，正常打开登陆页面然后进入页面，是正常的不会挂载。但是使用单点登陆就会挂载，然后就去一个测试检测，最后发现，只要把传参模式修改了，就正常了！！！！！！！！！！！！！！！！！！！！！！！！！！！
优化前的传参，使用了props
{
name: 'Login',
path: '/Login',
component: Login,
props: (route) => ({username: route.query.username})
},优化后的参数，直接拼在路径后面
{
name: 'Login',
path: '/Login/:username',
component: Login,
// props: (route) => ({username: route.query.username})
},我是真的栓q！
总结
到此这篇关于vue项目优化的文章就介绍到这了,更多相关vue项目优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
让 babel webpack vue 配置文件支持智能提示的方法
这篇文章主要介绍了让 babel webpack vue 配置文件支持智能提示的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue组件间传值的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue引入elementUi后打开页面报错Uncaught TypeError的解决方式
这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了vue3前端实现微信支付的详细步骤,随着移动端的普及和互联网购买需求的增加,微信支付在电商领域中发挥着越来越重要的作用,文中给出了详细的代码示例,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue-cli中实现响应式布局的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了element-table如何实现自定义表格排序，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了axios在Vue项目中用来向后台发送请求（调接口API），获取响应信息的方法,axios 是一个轻量的 HTTP客户端，基于 XMLHttpRequest 服务来执行 HTTP 请求，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
本文主要介绍了Vue中的性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了快速修改antd vue单个组件的默认样式方式，具有很好的参考价值，希望对大家有所帮助。2022-08-08
在vue项目中父子组件间的通讯很方便,但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦,这时使用eventBus通讯,就可以很便捷的解决这个问题,这篇文章主要给大家介绍了关于Vue中事件总线(eventBus)使用的相关资料,需要的朋友可以参考下2022-03-03
最新评论