您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

Vue项目优化打包详解

51自学网 2022-02-21 13:37:22
  javascript

前言

Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧~

一、路由懒加载

1.为什么需要路由懒加载

当刚运行项目的时候,发现刚进入页面,就将所有的js文件和css文件加载了进来,这一进程十分的消耗时间。 如果打开哪个页面就对应的加载响应页面的js文件和css文件,那么页面加载速度会大大提升。

2.如何实现路由懒加载

vue官方文档:路由懒加载

代码如下(示例):

{    path: '/login',    component: () => import('@/views/login/index'),    hidden: true  },复制代码

3.路由懒加载中的魔法注释

通过在注释中指定webpackChunkName,可以自定义这个文件的名字。 代码如下(示例):

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")复制代码

二、分析包大小

1.需求

想要知道打包生成的文件中,每个文件所占的空间大小。以便于我们分析,对代码进行优化处理。

2.如何生成打包分析文件

终端中运行 npm run preview
下载地址:
vue项目中添加electron的详细代码
vue3 学习笔记之axios的使用变化总结

万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。