打包体积优化

打包体积优化的必要性

Vue.js 项目随着功能增加，打包体积会不断膨胀。过大的 bundle 会导致首屏加载缓慢，影响用户体验。特别是在移动端或网络条件较差的环境下，体积优化显得尤为重要。通过分析 webpack-bundle-analyzer 生成的报告，可以清晰看到各个模块的占比情况。

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

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
}

代码分割策略

路由懒加载

Vue Router 支持动态导入语法，将路由组件拆分为独立 chunk。这种方式只在访问对应路由时才加载相关组件。

const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue')
  },
  {
    path: '/settings',
    component: () => import(/* webpackChunkName: "settings" */ './views/Settings.vue')
  }
]

组件级代码分割

对于大型组件，可以使用动态导入实现按需加载。结合 Vue 的 defineAsyncComponent 可以创建异步组件：

import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
)

第三方库优化

按需引入组件库

UI 库如 Element Plus 支持按需引入，避免全量导入：

import { ElButton, ElSelect } from 'element-plus'

// 在Vue项目中配置自动导入
// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

使用更轻量的替代方案

评估项目需求，考虑用更小的库替代：

• 日期处理：day.js 替代 moment.js
• HTTP 客户端：axios 替代 superagent
• 工具函数：lodash-es 配合 babel-plugin-lodash 实现按需加载

Tree Shaking 配置

确保项目配置支持 Tree Shaking，移除未引用代码：

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
    minimize: true,
    sideEffects: true
  }
}

在 package.json 中添加：

{
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

图片资源优化

压缩图片资源

使用 image-webpack-loader 自动压缩图片：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.65, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 }
      })
  }
}

使用现代图片格式

优先使用 WebP 格式，通过配置自动生成：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = 10240 // 10KB
        options.fallback.options.name = 'img/[name].[hash:8].[ext]'
        return options
      })
  }
}

构建配置优化

生产环境去除 source map

// vue.config.js
module.exports = {
  productionSourceMap: false
}

配置更合理的 chunk 分割

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxSize: 244 * 1024, // 244KB
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

运行时优化

服务端开启 Gzip 压缩

虽然这不是前端直接控制的，但可以确保构建产物支持压缩：

npm install compression-webpack-plugin --save-dev

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

使用 Preload/Prefetch 优化资源加载

<link rel="preload" href="/assets/important.js" as="script">
<link rel="prefetch" href="/assets/next-page.js" as="script">

在 Vue CLI 项目中，可以通过配置自动生成：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('preload').tap(options => {
      options[0] = {
        rel: 'preload',
        include: 'allAssets',
        fileBlacklist: [/\.map$/, /hot-update\.js$/]
      }
      return options
    })
  }
}

长期维护策略

定期分析 bundle 组成

设置 CI/CD 流程中的 bundle 大小检查：

npm install --save-dev size-limit

{
  "scripts": {
    "size": "size-limit",
    "build": "vue-cli-service build && npm run size"
  },
  "size-limit": [
    {
      "path": "dist/js/chunk-vendors.*.js",
      "limit": "300 KB"
    },
    {
      "path": "dist/js/app.*.js",
      "limit": "150 KB"
    }
  ]
}

动态 polyfill 服务

使用现代浏览器支持的 ES 特性，通过 polyfill.io 按需加载：

<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019"></script>

高级优化技巧

使用 WebAssembly 处理性能敏感任务

对于计算密集型任务，考虑使用 WebAssembly：

// 加载WASM模块
async function loadWasm() {
  const imports = {}
  const res = await fetch('module.wasm')
  const bytes = await res.arrayBuffer()
  const { instance } = await WebAssembly.instantiate(bytes, imports)
  return instance.exports
}

// 使用
const wasmModule = await loadWasm()
const result = wasmModule.heavyCalculation(123)

服务端渲染的优化策略

对于 SSR 项目，注意避免服务端和客户端 bundle 重复：

// 使用webpack的externals避免打包某些库
module.exports = {
  configureWebpack: {
    externals: process.env.NODE_ENV === 'production' ? {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    } : {}
  }
}

监控与持续优化

建立性能监控机制，持续跟踪打包体积变化：

// 使用webpack插件记录构建统计
const { StatsWriterPlugin } = require('webpack-stats-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new StatsWriterPlugin({
        filename: 'stats.json',
        fields: ['assets', 'chunks', 'modules']
      })
    ]
  }
}

结合 CI 系统，可以设置体积增长报警机制，防止意外引入大型依赖。