vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue vite 按需加载

Vue 项目中通过 Vite 实现按需加载功能对比 Webpack 的优缺点分析

作者：前端布洛芬

这篇文章主要介绍了Vue项目中通过Vite实现按需加载功能对比Webpack的优缺点分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

大白话 Vue 项目中如何通过 Vite 实现按需加载？对比 Webpack 的优缺点。

前端同学有没有遇到过这种崩溃场景？
开发的Vue项目上线后，用户抱怨"点个页面转5秒"——打开Chrome DevTools一看，app.js足有2MB！里面塞着没用到的组件、第三方库，甚至去年删掉的代码……今天咱们就聊前端性能优化的"续命神器"——按需加载，用Vite和Webpack两种主流工具实现，看完这篇，你不仅能让首屏快到飞起，还能和面试官唠明白底层逻辑～

一、首屏加载慢的"三大元凶"

先讲个我上周接的优化需求：某电商Vue项目首屏加载时间3.8秒（行业平均优秀线是1.5秒）。用Lighthouse一测，问题全在"一次性加载太多代码"：

这些问题的根源，是代码"一刀切"打包——把所有代码塞成一个大文件，用户打开页面时得先下载这个"大文件"才能看到内容。而按需加载（Code Splitting）的核心，就是把代码拆成多个小文件，用户需要时再加载（比如点进某个路由再加载对应组件），直接解决首屏慢的痛点～

二、按需加载的"底层逻辑"

要搞懂Vite和Webpack的按需加载，得先明白**代码分割（Code Splitting）**的底层原理：

1. 核心思想：“用多少，下多少”

浏览器加载JS文件是"阻塞式"的——下载完app.js才能执行渲染。代码分割就是把大文件拆成多个小文件（chunk），用户访问某个功能时，再动态加载对应的chunk。比如：

2. Vite vs Webpack：底层工具链的差异

Vite和Webpack都支持代码分割，但底层实现不同：

Vite基于Rollup，利用ES模块的import()动态导入语法（原生支持），配合vite.config.js的build.rollupOptions配置，实现更细粒度的拆分；Webpack基于自身的代码分割机制，通过import()动态导入、splitChunks插件（优化公共代码）、webpackPrefetch注释（预加载）实现拆分。

3. 按需加载的"触发条件"

无论用Vite还是Webpack，按需加载的触发都依赖动态导入（Dynamic Import）——这是ES6的标准语法，返回一个Promise，浏览器会在运行时请求对应的JS文件。示例：

// 动态导入组件（返回Promise）
import('./components/Comment.vue').then((module) => {
  // 加载完成后使用组件
});

三、代码示例：Vite和Webpack的实现对比

以Vue项目的"路由懒加载"和"组件懒加载"为例，看Vite和Webpack的具体实现。

场景1：路由懒加载（最常用场景） Vite实现（Vue Router 4+）

Vue Router默认支持动态导入，Vite会自动将动态导入的路由组件拆分成独立chunk。

// router/index.js（Vite版）
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'), // 动态导入：拆分成Home-chunk.js
    },
    {
      path: '/order',
      name: 'Order',
      component: () => import('@/views/Order.vue'), // 拆分成Order-chunk.js
    },
    {
      path: '/profile',
      name: 'Profile',
      // 可选：添加预加载注释（Vite会生成<link rel="preload">）
      component: () => import(/* @vite-ignore */ '@/views/Profile.vue'), // 忽略预加载（可选）
    },
  ],
});
export default router;

Vite的特殊优化：

Webpack实现（Vue Router 4+）

Webpack需要配合webpackChunkName注释自定义chunk名，并用splitChunks优化公共代码。

// router/index.js（Webpack版）
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      // 动态导入+chunk名注释（Webpack专属）
      component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
    },
    {
      path: '/order',
      name: 'Order',
      component: () => import(/* webpackChunkName: "order" */ '@/views/Order.vue'),
    },
    {
      path: '/profile',
      name: 'Profile',
      // 预加载注释（Webpack会生成<link rel="prefetch">）
      component: () => import(/* webpackPrefetch: true */ '@/views/Profile.vue'),
    },
  ],
});
export default router;

Webpack的特殊配置：

场景2：组件懒加载（动态组件）

Vite实现（Vue 3+）

Vue 3的defineAsyncComponent可以懒加载组件，Vite自动拆分chunk。

<template>
  <!-- 点击按钮后加载组件 -->
  <button @click="loadComment">加载评论</button>
  <component :is="CommentComponent" v-if="CommentComponent" />
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
// 定义异步组件（Vite拆分成Comment-chunk.js）
const loadComment = () => {
  // 动态导入+加载状态（可选）
  const CommentComponent = defineAsyncComponent({
    loader: () => import('@/components/Comment.vue'),
    loadingComponent: () => '加载中...', // 加载时显示的占位
    errorComponent: () => '加载失败！', // 加载失败显示的提示
  });
  // 赋值给模板使用
  CommentComponent.value = CommentComponent;
};
</script>

Webpack实现（Vue 3+）

Webpack同样用defineAsyncComponent，但需配合webpackMode: 'lazy'（默认已支持）。

<template>
  <button @click="loadComment">加载评论</button>
  <component :is="CommentComponent" v-if="CommentComponent" />
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const loadComment = () => {
  const CommentComponent = defineAsyncComponent({
    // Webpack专属注释（控制拆分方式）
    loader: () => import(/* webpackMode: "lazy" */ '@/components/Comment.vue'),
    loadingComponent: () => '加载中...',
    errorComponent: () => '加载失败！',
  });
  CommentComponent.value = CommentComponent;
};
</script>

场景3：第三方库按需加载（以Element Plus为例） Vite实现（配合unplugin-vue-components）

Vite通过unplugin-vue-components自动按需导入组件，无需手动import。

# 安装插件
npm install unplugin-vue-components -D
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    vue(),
    // 自动按需导入Element Plus组件
    Components({
      resolvers: [ElementPlusResolver()], // 指定Element Plus解析器
    }),
  ],
});

效果：

Webpack通过babel-plugin-import实现按需导入。

# 安装插件
npm install babel-plugin-import -D
// babel.config.js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        libraryDirectory: 'es',
        style: 'css', // 按需导入样式
      },
      'element-plus',
    ],
  ],
};

效果：

四、Vite vs Webpack的优缺点

对比项ViteWebpack
配置复杂度低（插件自动处理，如unplugin-vue-components）中（需手动配置splitChunks、babel-plugin-import）
构建速度快（开发时用ES模块原生加载，无需打包）慢（开发时需编译整个项目）
代码拆分粒度细（基于Rollup的Tree Shaking更彻底）较细（依赖splitChunks配置）
第三方库支持友好（unplugin系列插件生态丰富）友好（babel-plugin-import等成熟插件）
预加载控制支持/* @vite-ignore */跳过预加载支持webpackPrefetch标记预加载
兼容性现代浏览器（依赖ES模块）全兼容（支持传统浏览器）
学习成本低（配置简单，接近原生JS）中（需掌握splitChunks等配置）

五、面试题回答方法

正常回答（结构化）：

“在Vue项目中实现按需加载，Vite和Webpack的核心都是通过代码分割（Code Splitting）将大文件拆分成小chunk，用户需要时动态加载。具体差异：

大白话回答（接地气）：

“按需加载就像点外卖——你饿了不会一次性点满汉全席，而是先点碗面垫肚子，想吃甜点了再下单。
Vite像用‘新派外卖APP’：下单后秒响应（开发时不用等打包），配送（代码拆分）更智能（Tree Shaking更彻底），还能自动帮你只点需要的菜（unplugin插件按需导入组件）。
Webpack像‘传统外卖平台’：配送（代码拆分）配置更复杂（得调splitChunks），但能送到更多老小区（兼容旧浏览器），适合需要照顾不同用户的场景。
总之，小而新的项目用Vite更爽，大而全的项目选Webpack更稳～”

六、总结：

3个实战建议+2个避坑指南

3个实战建议：

2个避坑指南：

七、扩展思考：4个高频问题解答

问题1：Vite的import()和Webpack的import()有什么区别？

解答：

问题2：按需加载会影响SEO吗？

解答：

问题3：如何查看拆分后的chunk？

解答：

问题4：Vite支持splitChunks吗？

解答：
Vite基于Rollup，没有splitChunks插件，但通过build.rollupOptions.output.manualChunks配置实现类似功能。示例：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将所有element-plus组件拆成一个chunk
          'element-plus': ['element-plus'],
          // 将所有路由组件按业务线拆分
          'admin': ['@/views/admin/*'],
        },
      },
    },
  },
});

结尾：按需加载，让代码"轻装上阵"

首屏加载速度，直接影响用户留存——你不会等5秒看一个页面，用户也不会。按需加载不是玄学，而是通过代码拆分让用户"用多少，下多少"的简单逻辑。无论是Vite的清爽配置，还是Webpack的灵活控制，核心都是让代码"轻装上阵"。

下次优化项目时，不妨试试按需加载——你会发现，首屏快了，用户笑了，自己也不用熬夜改BUG了～如果这篇文章帮你理清了思路，记得点个收藏，咱们下期，不见不散！

到此这篇关于Vue 项目中如何通过 Vite 实现按需加载？对比 Webpack 的优缺点。的文章就介绍到这了,更多相关Vue 项目中如何通过 Vite 实现按需加载？对比 Webpack 的优缺点。内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文