前言
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的使用变化总结 |