前端性能优化

我们首先创建一个基础的项目，其中包含两个路由

1. 路由懒加载

不使用路由懒加载

下面是我们不使用路由懒加载引入组件，我们观察一下打包后的文件和浏览器加载资源时的情况

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
import Home from '../views/HomeView.vue'
import About from '../views/AboutView.vue'
// 1. 定义路由规则（使用TypeScript类型校验）
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

// 2. 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 使用HTML5历史模式
  routes,
});

// 3. 导出路由实例
export default router;

看一下打包后的图 我们再看一下浏览器首页加载时，加载资源的情况

我们可以观察到当不使用路由懒加载时，首页加载会将所有的组件一起加载

使用路由懒加载

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
// import Home from '../views/HomeView.vue'
// import About from '../views/AboutView.vue'
// 1. 定义路由规则（使用TypeScript类型校验）
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/HomeView.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  }
];

// 2. 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 使用HTML5历史模式
  routes,
});

// 3. 导出路由实例
export default router;

跟上述步骤一样，打包看一下打包后的文件和浏览器加载资源时如何加载

打包后的文件

浏览器第一次加载资源时

我们进入About页面时

总结

1. 懒加载打包后的文件会将单个页面分离出来形成单个js文件，这样减少了主包的体积
2. 浏览器在首次加载页面时，只加载当前页面的资源，不加载未访问页面的资源
3. 路由的懒加载是首屏优化的重要方式之一,且对于多数生产级应用而言，懒加载是必选项

2. 静态资源打包

我们在该项目中放入几个图片，添加几个css文件，将下列代码注释掉，查看一下打包的文件

build: {
    rollupOptions: {
        output: {
            assetFileNames: 'assets/[name]-[hash][extname]',  // 静态资源文件名
            chunkFileNames: 'js/[name]-[hash].js', // 代码分割后文件名
            entryFileNames: 'js/[name]-[hash].js', // 入口文件名
        }
    },
}

查看打包后的文件

解开注释，查看打包后的文件

assets中的文件

js中的文件

总结

vite默认会把所有静态资源都打包到assets文件夹，配置chunkFileNames、entryFileNames、assetFileNames将静态资源分类。

优势：
目录清晰分离​​：静态资源（assets/）与JavaScript文件（js/）独立存放，避免构建产物混乱。
​快速定位问题​​：开发调试时可直接根据路径类型定位资源（如排查图片路径错误只需检查assets/目录）。
​符合工程规范​​：适配CDN部署结构，便于按目录批量缓存刷新或权限控制。
多入口防覆盖​​：当项目有多个入口（如主站+管理后台），哈希避免同名入口文件互相覆盖。
​ ​并行构建安全​​：CI/CD流水线中多次构建不会因文件名相同导致产物冲突。
​ 版本回溯能力​​：通过哈希值可追溯历史构建版本，便于回滚验证。