Vue项目生产环境性能优化的实战技巧

// 传统写法（一次性加载所有组件）
import Home from './Home.vue'

// 优化写法（动态导入实现懒加载）
const Home = () => import(/* webpackChunkName: "home" */ './Home.vue')

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home } // 访问/home时才会加载
  ]
})

// 错误示例（全量引入Element UI）
import ElementUI from 'element-ui'

// 正确示例（按需引入）
import { Button, Select } from 'element-ui'

// 配合babel插件（babel-plugin-component）自动转换

// webpack配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 分离node_modules到单独文件
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  }
}

# 构建命令（自动启用生产模式）
vue-cli-service build --mode production

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)$/, // 压缩JS和CSS
        threshold: 10240, // 大于10KB才压缩
      })
    ]
  }
}

<template>
  <!-- 普通列表（渲染所有项） -->
  <div v-for="item in bigList" :key="item.id">{{ item.text }}</div>
  
  <!-- 优化列表（使用vue-virtual-scroller） -->
  <RecycleScroller
    :items="bigList"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div>{{ item.text }}</div>
    </template>
  </RecycleScroller>
</template>

<template functional>
  <!-- 没有this，通过props和context访问数据 -->
  <div>{{ props.message }}</div>
</template>

// 使用web-vitals库监测
import { getCLS, getFID, getLCP } from 'web-vitals'

getCLS(console.log)  // 布局偏移量
getFID(console.log)  // 首次输入延迟
getLCP(console.log)  // 最大内容渲染时间