// 傳統(tǒng)寫法（一次性加載所有組件）
import Home from './Home.vue'

// 優(yōu)化寫法（動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)懶加載）
const Home = () => import(/* webpackChunkName: "home" */ './Home.vue')

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home } // 訪問/home時(shí)才會(huì)加載
  ]
})

// 錯(cuò)誤示例（全量引入Element UI）
import ElementUI from 'element-ui'

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

// 配合babel插件（babel-plugin-component）自動(dòng)轉(zhuǎn)換

// webpack配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 分離node_modules到單獨(dú)文件
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  }
}

# 構(gòu)建命令（自動(dòng)啟用生產(chǎn)模式）
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>
  <!-- 普通列表（渲染所有項(xiàng)） -->
  <div v-for="item in bigList" :key="item.id">{{ item.text }}</div>
  
  <!-- 優(yōu)化列表（使用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訪問數(shù)據(jù) -->
  <div>{{ props.message }}</div>
</template>

// 使用web-vitals庫監(jiān)測
import { getCLS, getFID, getLCP } from 'web-vitals'

getCLS(console.log)  // 布局偏移量
getFID(console.log)  // 首次輸入延遲
getLCP(console.log)  // 最大內(nèi)容渲染時(shí)間