更小的运行时体积

Vue.js 作为一个轻量级的前端框架，在运行时体积方面一直有不错的表现。但随着项目复杂度增加，如何进一步优化运行时体积成为开发者关注的焦点。从代码拆分到按需引入，再到编译优化，有许多方法可以减小 Vue.js 应用的运行时体积。

代码拆分与懒加载

代码拆分是减小运行时体积最直接的方式之一。Vue.js 结合 Webpack 或 Vite 可以轻松实现路由级别的懒加载。例如，在 Vue Router 中动态导入组件：

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

这种方式确保只有在访问特定路由时才加载对应组件代码。更进一步，可以拆分大型组件：

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

按需引入第三方库

许多第三方库支持按需引入，避免打包整个库。以 Element Plus 为例：

import { ElButton, ElInput } from 'element-plus'
// 而不是 import ElementPlus from 'element-plus'

对于工具类库如 lodash，可以使用：

import debounce from 'lodash/debounce'
// 而不是 import { debounce } from 'lodash'

使用 Tree Shaking

Tree Shaking 依赖 ES Module 的静态分析特性。确保项目配置支持：

// vite.config.js
export default {
  build: {
    target: 'esnext' // 更好的 Tree Shaking
  }
}

在 package.json 中设置：

{
  "sideEffects": false
}

组件级代码优化

优化单个组件也能减小体积。避免在模板中使用复杂表达式：

<!-- 不推荐 -->
<template>
  <div>{{ heavyComputation() }}</div>
</template>

<!-- 推荐 -->
<template>
  <div>{{ computedValue }}</div>
</template>
<script>
export default {
  computed: {
    computedValue() {
      return this.heavyComputation()
    }
  }
}
</script>

编译时优化

Vue 3 的编译器可以进行更多优化。在 vite 中配置：

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'condense' // 压缩空白字符
        }
      }
    })
  ]
}

使用更轻量的替代方案

某些场景下可以用原生 API 替代库：

// 替代 moment.js
const formatDate = (date) => new Date(date).toLocaleDateString()

// 替代 axios
fetch('/api/data').then(res => res.json())

静态资源优化

对于 SVG 图标，使用内联方式：

<template>
  <svg viewBox="0 0 24 24">
    <path d="M12 2L1 12h3v9h6v-6h4v6h6v-9h3L12 2z"/>
  </svg>
</template>

构建配置优化

调整构建配置能显著影响输出体积：

// vite.config.js
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
}

运行时特性裁剪

Vue 3 允许裁剪不需要的运行时特性：

// vite.config.js
export default {
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.runtime.esm-bundler.js'
    }
  }
}

服务端渲染优化

对于 SSR 应用，注意区分客户端和服务端构建：

// 服务端入口
import { createSSRApp } from 'vue'

export function createApp() {
  return createSSRApp(App)
}

长期缓存策略

利用文件名哈希实现长期缓存：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].[hash].js`,
        chunkFileNames: `[name].[hash].js`,
        assetFileNames: `[name].[hash].[ext]`
      }
    }
  }
}

监控与分析

使用分析工具持续监控体积变化：

// package.json
{
  "scripts": {
    "analyze": "vite build --mode analyze"
  }
}

配合插件：

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [visualizer()]
}