资讯详情

A嵌入B，B加载速度太慢了，需要4s+，需优化：
B系统技术栈： vue3 + vite
优化结果如下，上下对比还有有差距的：

一、先处理： 首屏加载的文件——先优化文件大

step1： 安装可视化插件 rollup-plugin-visualizer；

viteconfig.js

export default defineConfig({base: process.env.PUBLIC_PATH || '/pomp-budget/',plugins: [vue(),visualizer({open: true,gzipSize: true,brotliSize: true,})],resolve: {alias: {'@': fileURLToPath(new URL('src', import.meta.url)),},},server: {proxy: {},},build: {outDir: 'dist',minify: true,chunkSizeWarningLimit: 5000,assetsInlineLimit: 1024 * 1024 * 10,cssCodeSplit: false,sourcemap: process.env.NODE_ENV === 'development' ? true : false,rollupOptions: {plugins: [],output: {// Static resource classification and packagingchunkFileNames: 'assets/js/[name]-[hash].js',entryFileNames: 'assets/js/[name]-[hash].js',assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',},},},
})

step2： 查看报告

npm run build 后会自动打开报告 （即 vite build）
根据报告查看具体那些占用内存大；

目前看出lodash文件较大

step3: 根据报告优化

1. lodash换成lodash-es, lodash-es支持treeSharking
2. 存在moment和dayjs两个插件功能重复，选择性使用dayjs

二、再处理： 首屏加载的文件——再优化文件多

可以看出系统在加载时，首屏加载了157个文件，chrome请求线程最多一次性6个加载，如此导致的加载排队，是首屏加载慢的主要原因

step1: 观察build配置发现以前的build完全没考虑打包，按照如下调整：

step2: 再执行vite preview，加载文件减少到100个，查看前后对比，相当明显~

step3: 还没完：100个文件也是多的，也是需要处理减少的，因为同一路由文件没有进行合包处理，所以每个组件都是最小化原子，这是在生产上不期望的——但我不会优化了，哈哈...拜拜,这速度也满足要求了