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: 根据报告优化
- lodash换成lodash-es, lodash-es支持treeSharking
- 存在moment和dayjs两个插件功能重复,选择性使用dayjs
二、再处理: 首屏加载的文件——再优化文件多
可以看出系统在加载时,首屏加载了157个文件,chrome请求线程最多一次性6个加载,如此导致的加载排队,是首屏加载慢的主要原因