当前位置：首页 > news >正文

前端——前端构建优化实战：从15秒到1.5秒，我是如何优化打包的

news 2026/4/17 7:41:03

一个真实的优化故事

某天下午，产品经理跑过来：

“用户反馈页面加载要15秒，技术群里都在问是不是服务器炸了。”

我打开性能面板，发现：

首屏JS体积：4.8MB（gzip后1.2MB）
首屏CSS体积：0.8MB
首页请求数：47个
构建时间：2分30秒

经过一周优化，结果：

首屏JS体积：0.4MB（gzip后0.12MB）↓92%
首屏CSS体积：0.1MB↓87%
首页请求数：12个↓74%
构建时间：28秒↓81%
页面加载：1.5秒↓90%

今天，我把这套优化方案完整分享出来。

一、打包分析：找到瓶颈

1.1 使用Webpack Bundle Analyzer

bash

npm install --save-dev webpack-bundle-analyzer

javascript

// vue.config.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'static', // 生成静态HTML文件 openAnalyzer: false, // 不自动打开 reportFilename: 'report.html' }) ] } }

运行后你会看到类似这样的结果：

text

dist/ ├── chunk-vendors.js 2.8MB (57%) ← 第三方库 ├── app.js 1.2MB (24%) ← 业务代码 ├── chunk-common.js 0.5MB (10%) ← 公共模块 └── ...

发现：chunk-vendors.js占了57%，说明第三方库是主要问题。

二、依赖优化

2.1 按需加载UI库

javascript

// ❌ 错误：全量引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // ✅ 正确：按需引入 // 安装插件 npm install babel-plugin-component -D // babel.config.js module.exports = { plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ] } // 按需引入 import { Button, Input, Dialog } from 'element-ui'

效果：ElementUI从2.3MB降到0.2MB

2.2 日期库优化

javascript

// ❌ 错误：全量引入moment (300KB) import moment from 'moment' // ✅ 方案1：使用dayjs (7KB) import dayjs from 'dayjs' // ✅ 方案2：moment只保留中文语言包 import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') // Webpack配置去掉其他语言包 new webpack.ContextReplacementPlugin( /moment[/\\]locale/, /zh-cn/ )

2.3 图标库优化

javascript

// ❌ 错误：全量引入图标库 import * as Icons from '@ant-design/icons-vue' // ✅ 正确：使用vite-plugin-svg-icons或手动引入 // 或使用iconfont的Symbol方式，只打包使用的图标

2.4 使用CDN加速

javascript

// vue.config.js module.exports = { configureWebpack: { externals: { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios', 'element-ui': 'ELEMENT' } } }

html

<!-- public/index.html --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script>

效果：减少打包体积约1.2MB

三、代码分割

3.1 路由懒加载

javascript

// router/index.js // ❌ 错误：一次性加载所有页面 import Home from '@/views/Home.vue' import About from '@/views/About.vue' // ✅ 正确：路由懒加载 const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue') const About = () => import(/* webpackChunkName: "about" */ '@/views/About.vue') // 使用魔法注释自定义chunk名 const UserDetail = () => import(/* webpackChunkName: "user" */ '@/views/user/Detail.vue')

3.2 组件异步加载

vue

<template> <div> <!-- 按需加载的大组件 --> <HeavyChart v-if="showChart" /> </div> </template> <script> export default { components: { HeavyChart: () => import('@/components/HeavyChart.vue') }, data() { return { showChart: false } } } </script>

3.3 分割第三方库

javascript

// vue.config.js module.exports = { configureWebpack: { optimization: { splitChunks: { chunks: 'all', cacheGroups: { // 第三方库单独打包 vendors: { name: 'chunk-vendors', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' }, // 公共组件单独打包 common: { name: 'chunk-common', minChunks: 2, priority: 5, chunks: 'initial', reuseExistingChunk: true }, // UI库单独打包（可选） elementUI: { name: 'chunk-element', test: /[\\/]node_modules[\\/]element-ui[\\/]/, priority: 20 } } } } } }

四、构建配置优化

4.1 Webpack配置

javascript

// vue.config.js const TerserPlugin = require('terser-webpack-plugin') module.exports = { // 生产环境移除console configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer = [ new TerserPlugin({ terserOptions: { compress: { drop_console: true, // 移除console drop_debugger: true // 移除debugger } } }) ] } }, // 压缩图片 chainWebpack: config => { config.module .rule('images') .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true, disable: process.env.NODE_ENV === 'development' }) }, // 生产环境关闭source-map productionSourceMap: false, // 设置构建输出目录 outputDir: 'dist', // 静态资源目录 assetsDir: 'static', // 文件名hash filenameHashing: true }

4.2 Vite配置（新项目推荐）

javascript

// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], build: { // 压缩 minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true } }, // 代码分割 rollupOptions: { output: { manualChunks: { 'vue-vendor': ['vue', 'vue-router', 'vuex'], 'ui-vendor': ['element-plus'] } } }, // chunk大小警告阈值 chunkSizeWarningLimit: 500, // 生成sourcemap sourcemap: false }, // 优化依赖预构建 optimizeDeps: { include: ['vue', 'vue-router', 'vuex', 'axios'] } })

五、运行时优化

5.1 预加载与预连接

html

<!-- public/index.html --> <head> <!-- DNS预解析 --> <link rel="dns-prefetch" href="//api.example.com"> <link rel="dns-prefetch" href="//cdn.example.com"> <!-- 预连接 --> <link rel="preconnect" href="https://api.example.com"> <!-- 预加载关键资源 --> <link rel="preload" as="style" href="/css/critical.css"> <!-- 预获取下一页资源 --> <link rel="prefetch" href="/js/home.js"> </head>

5.2 图片优化

vue

<template> <!-- 使用WebP格式 --> <picture> <source :srcset="webpUrl" type="image/webp"> <img :src="fallbackUrl" :alt="alt" loading="lazy"> </picture> </template> <script> export default { computed: { webpUrl() { return this.url.replace(/\.(jpg|png)$/, '.webp') } } } </script>

5.3 骨架屏

vue

<template> <div class="skeleton" v-if="loading"> <div class="skeleton-avatar"></div> <div class="skeleton-line"></div> <div class="skeleton-line short"></div> </div> <div v-else> <!-- 实际内容 --> </div> </template> <style scoped> .skeleton { &-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } &-line { height: 16px; margin: 8px 0; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; &.short { width: 60%; } } } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } </style>

六、部署策略

6.1 Nginx配置

nginx

# /etc/nginx/conf.d/app.conf server { listen 80; server_name example.com; root /var/www/dist; index index.html; # Gzip压缩 gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/javascript application/json; gzip_comp_level 6; # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control "public, immutable"; } # HTML不缓存 location ~* \.html$ { expires -1; add_header Cache-Control "no-cache, no-store, must-revalidate"; } # SPA路由支持 location / { try_files $uri $uri/ /index.html; } # API代理 location /api/ { proxy_pass http://backend:3000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

6.2 Docker部署

dockerfile

# Dockerfile FROM node:16-alpine as builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production && npm cache clean --force COPY . . RUN npm run build # 生产镜像 FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

bash

# 构建镜像 docker build -t app-frontend:latest . # 运行容器 docker run -d -p 80:80 --name frontend app-frontend:latest

6.3 CI/CD配置

yaml

# .github/workflows/deploy.yml name: Deploy on: push: branches: [main] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '16' cache: 'npm' - run: npm ci - run: npm run build - name: Upload to CDN run: | npm run deploy:cdn - name: Deploy to Server uses: appleboy/scp-action@master with: host: ${{ secrets.SERVER_HOST }} username: ${{ secrets.SERVER_USER }} key: ${{ secrets.SERVER_KEY }} source: "dist/*" target: "/var/www/html/"

七、优化效果总览

指标	优化前	优化后	提升
首屏JS体积	4.8MB	0.4MB	92%↓
首屏CSS体积	0.8MB	0.1MB	87%↓
请求数	47个	12个	74%↓
构建时间	150秒	28秒	81%↓
FCP (First Contentful Paint)	2.8s	0.8s	71%↓
LCP (Largest Contentful Paint)	4.2s	1.2s	71%↓
TTI (Time to Interactive)	3.5s	1.5s	57%↓