【工程化】前端打包时间优化

你脸上有BUG2025-12-18 14:24

背景

在打包编译时发现built时间长达57s，并且提示超过500kb，说明需要优化了！

优化

插件推荐： Rollup Plugin Visualizer
项目引入：

javascript 复制代码

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig(() => {

    return {
        build: {
            sourcemap: true
        },
        plugins: [
            vue(),
            visualizer({
                open: true, // 构建完成后会自动打开浏览器，显示可视化报告。
                filename: 'stats.html', // 生成的报告文件名称
                gzipSize: true, // 显示各文件在经过 gzip 压缩后的大小
                brotliSize: true // 显示各文件在经过 brotli 压缩后的大小
            }),
       ]
   }
}

页面展示

可以看到占主要大头的是最右侧两块，可以去除全局引用+build.rollupOptions.output.manualChunks手动分包

初步优化一波，把最大的vxxxx部分和ant-design-vue拆出来

javascript 复制代码

export default defineConfig(({ mode }) => {

    return {
        build: {
            sourcemap: true,
            rollupOptions: {
                output: {
                    manualChunks(id) {
                        if (id.includes('@visactor')) {
                            if (id.includes('vchart'))
                                return 'vendor-visactor-chart'
                            if (id.includes('vtable'))
                                return 'vendor-visactor-table'
                            if (id.includes('vlayout'))
                                return 'vendor-visactor-layout'
                            return 'vendor-visactor-other'
                        }
                        if (id.includes('ant-design-vue')) {
                            // 将大型组件单独分包
                            if (id.includes('/table/')) return 'antd-table'
                            if (id.includes('/form/')) return 'antd-form'
                            if (id.includes('/date-picker/')) return 'antd-date'
                            if (id.includes('/select/')) return 'antd-select'
                            if (id.includes('/modal/')) return 'antd-modal'
                            // 样式和工具单独分包
                            if (id.includes('/style/')) return 'antd-style'
                            if (id.includes('/_util/')) return 'antd-util'
                            return 'antd-other'
                        }
                    }
                }
            }
        },
        plugins: [.....]

就有一些效果了（15%左右），再继续细化即可~