前端页面发布后，页面刷新一直在loading?

背景：

在做一个vue3+element-plus项目时，本地开发没有问题，发布到开发和测试环境，测试反馈刷新页面后一直在loading,如果打开控制台再刷新，就可以刷新出来。

问题定位：

开不开控制台的区别在于：打开控制台会勾选 禁用缓存

打开控制台发现入口文件的有个js包过大，居然有10M...

解决方案

1. nginx打开gzip的配置
2. 应用拆分bundle

思路： 这个项目本身页面不复杂,且多个项目复用了相同的脚手架配置，只有这个项目打出来的bundle会很大，细找原因，从两个方面拆分了bundle

• 路由配置组件改为动态加载 之前页面的路由组件都是在顶部import引入, 修改为() => import()引入

import Layout from '@/page/layout/index.vue';
import SceneTemplate from 'xxx'
export default [
  {
    path: '/',
    name: 'layout',
    component: Layout,
    meta: {
      keepAlive: true,
      isAuth: true,
    },
    children: [
        {
          path: '/xxx',
          name: 'xxx',
          component: SceneTemplate,
          component: () => import('@/views/admin-user-page/scene-template/index.vue'),
          meta: {
            keepAlive: true,
            isAuth: true,
          },
        },
    ]
}]

豆包给了比较完善的解释

• vite打包配置

// vite.config.js 
export default defineConfig({ 
// ... 其他配置 
    build: { 
        rollupOptions: { 
            output: { 
                manualChunks: { 
                    // 将 Vue, Vue Router, Pinia 等打包进一个名为 vendor 的 chunk 
                    vendor: ['vue', 'vue-router', 'pinia'], 
                    // 将 Element Plus 单独打包 
                    elementPlus: ['element-plus'], 
                    // 将 ECharts 单独打包 
                    echarts: ['echarts'], 
                },
            },
        },
    }, 
})````