在 Vue.js 应用开发中，包优化是提升应用性能的重要环节。通过合理的优化策略，可以显著减小应用的包体积，提高加载速度。

代码分割

路由级别的代码分割

使用动态导入实现路由级别的代码分割：

// router/index.js
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  },
  {
    path: '/user',
    name: 'User',
    component: () => import(/* webpackChunkName: "user" */ '@/views/User.vue'),
    children: [
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import(/* webpackChunkName: "user" */ '@/views/UserProfile.vue')
      }
    ]
  }
]

组件级别的代码分割

对于大型组件或不常使用的组件，可以进行懒加载：

export default {
  components: {
    // 普通组件
    NormalComponent: () => import('@/components/NormalComponent.vue'),
    
    // 只在需要时才加载的重型组件
    HeavyChart: () => import(
      /* webpackChunkName: "charts" */ 
      '@/components/HeavyChart.vue'
    ),
    
    // 带有加载状态的懒加载组件
    AsyncComponent: () => ({
      component: import('@/components/AsyncComponent.vue'),
      loading: import('@/components/LoadingComponent.vue'),
      error: import('@/components/ErrorComponent.vue'),
      delay: 200,
      timeout: 3000
    })
  }
}

Tree Shaking

Tree Shaking 是一种在构建时移除 JavaScript 上下文中未引用代码(dead-code)的技术。

按需导入

只导入需要的功能：

// 不推荐 - 导入整个库
import _ from 'lodash'
const result = _.pick(object, ['a', 'b'])

// 推荐 - 按需导入
import pick from 'lodash/pick'
const result = pick(object, ['a', 'b'])

使用 ES6 模块语法

确保使用 ES6 的 import/export 语法，以便构建工具能够进行 Tree Shaking：

// utils/helpers.js
export function formatDate(date) {
  // 实现格式化逻辑
  return new Date(date).toISOString().split('T')[0]
}

export function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj))
}

export function isEmpty(value) {
  if (value === null || value === undefined) return true
  if (Array.isArray(value)) return value.length === 0
  if (typeof value === 'object') return Object.keys(value).length === 0
  return false
}

// 在组件中按需导入
import { formatDate } from '@/utils/helpers'

生产环境构建优化

Webpack 配置优化

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

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 启用 gzip 压缩
      config.plugins.push(
        new CompressionPlugin({
          algorithm: 'gzip',
          test: /\.(js|css|html|svg)$/,
          threshold: 8192,
          minRatio: 0.8
        })
      )

      // 优化 Terser 配置
      config.optimization.minimizer = [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 移除 console
              drop_debugger: true, // 移除 debugger
              pure_funcs: ['console.log'] // 移除特定函数调用
            }
          }
        })
      ]

      // 代码分割配置
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: 5,
            chunks: 'initial',
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

图片优化

// vue.config.js
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.90], speed: 4 },
        gifsicle: { interlaced: false }
      })
      .end()
  }
}

第三方库优化

CDN 引入

对于大型的第三方库，可以考虑通过 CDN 引入，而不是打包到应用中：

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

<!-- 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>

按需加载 UI 库

以 Element UI 为例：

// main.js
import Vue from 'vue'
import { Button, Select, Table, MessageBox } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
Vue.component(Table.name, Table)

Vue.prototype.$msgbox = MessageBox

Vue 特定优化

使用 v-show 和 v-if 的正确时机

<!-- 频繁切换使用 v-show -->
<button @click="toggleSidebar">切换侧边栏</button>
<sidebar v-show="showSidebar" />

<!-- 很少改变的条件使用 v-if -->
<admin-panel v-if="isAdmin" />

使用 Object.freeze() 阻止响应式转换

对于大型的静态数据列表，使用 Object.freeze() 可以避免将其转换为响应式数据：

export default {
  data() {
    return {
      staticList: []
    }
  },
  async created() {
    const largeStaticList = await api.getLargeList()
    // 对于不会改变的大型列表，使用 freeze 遞免响应式转换
    this.staticList = Object.freeze(largeStaticList)
  }
}

使用函数式组件

对于无状态、只负责渲染的组件，可以使用函数式组件：

// functional-list-item.vue
export default {
  functional: true,
  props: ['item'],
  render(h, { props }) {
    return h('div', { class: 'list-item' }, [
      h('span', props.item.name),
      h('span', props.item.description)
    ])
  }
}

构建分析

包分析工具

使用 webpack-bundle-analyzer 分析包的构成：

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

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

module.exports = {
  configureWebpack: config => {
    if (process.env.ANALYZE_BUNDLE) {
      config.plugins.push(new BundleAnalyzerPlugin())
    }
  }
}

运行分析：

ANALYZE_BUNDLE=true npm run build

实际优化示例

优化前的组件

// 优化前
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import LargeChartLibrary from 'large-chart-library'
import Moment from 'moment'
import _ from 'lodash'

Vue.use(ElementUI)

export default {
  data() {
    return {
      chartData: [],
      date: Moment().format('YYYY-MM-DD')
    }
  },
  methods: {
    processChartData(rawData) {
      return _.map(rawData, item => ({
        ...item,
        processed: true
      }))
    }
  },
  mounted() {
    this.chart = new LargeChartLibrary(this.$refs.chart)
  }
}

优化后的组件

// 优化后
import { DatePicker, Table } from 'element-ui' // 按需导入
import { formatDate } from '@/utils/date' // 自定义工具函数
import { mapData } from '@/utils/array' // 自定义工具函数

export default {
  components: {
    'el-date-picker': DatePicker,
    'el-table': Table
  },
  data() {
    return {
      chartData: [],
      date: formatDate(new Date()) // 使用自定义函数
    }
  },
  methods: {
    processChartData(rawData) {
      return mapData(rawData, item => ({
        ...item,
        processed: true
      })) // 使用自定义函数
    }
  },
  async mounted() {
    // 懒加载重型库
    const ChartLibrary = await import('large-chart-library')
    this.chart = new ChartLibrary.default(this.$refs.chart)
  }
}

通过实施这些包优化策略，可以显著减小应用的包体积，提高加载速度和用户体验。

贡献者: WhileSun

上一页渲染性能优化

下一页运行时优化