Vite VS Webpack

1.Webpack

1.1 特点

• 成熟稳定： Webpack 是前端生态中历史最悠久、最成熟的构建工具之一，拥有庞大的社区和丰富的插件生态。
• 模块化打包： Webpack 的核心功能是将项目中的所有资源（如 JavaScript、CSS、图片等）视为模块，并通过依赖关系将它们打包成一个或多个文件。
• 高度可配置： Webpack 的配置非常灵活，支持通过配置文件（如 webpack.config.js）自定义打包行为。
• 支持多种功能： Webpack 支持代码分割、懒加载、热更新（HMR）、Tree Shaking 等高级功能。

1.2 适用场景

• 大型项目，尤其是需要复杂配置和自定义打包逻辑的项目。
• 需要兼容旧版浏览器或处理复杂资源加载的项目

1.3 如何使用

安装 Webpack：

npm install webpack webpack-cli -D

创建配置文件（webpack.config.js）：

const path = require("path");

module.exports={
    entry: "./src/main.js",//入口文件
    output: {
        filename: "[name].bundle.js",//输出文件名
        path: path.resolve(__dirname, "dist"),//输出目录
    },
     module: {
      rules: [
        {
          test: /\.css|less$/, 
          use: ["style-loader", "css-loader", "less-loader"],
        },
      ],
    },
}

运行 Webpack：

npx webpack

2.Vite

2.1 特点

• 极速开发体验： Vite 利用现代浏览器的原生 ES 模块支持，在开发环境下无需打包，直接按需加载模块，启动速度极快。
• 基于 ES Modules： Vite 在开发模式下使用浏览器原生的 ES Modules，生产模式下使用 Rollup 进行打包。
• 开箱即用： Vite 提供了默认配置，支持 TypeScript、CSS 预处理器、热更新等功能，无需复杂配置。
• 面向现代浏览器： Vite 更适合现代浏览器，对旧版浏览器的支持需要通过插件实现。

2.2 适用场景

• 中小型项目，尤其是需要快速启动和开发的场景。
• 使用现代前端框架（如 Vue 3、React）的项目。

2.3 如何使用

安装 Vite：

npm create vite@latest

配置文件示例

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',  // 路径别名
    },
  },
  server: {
    port: 3000,          // 本地开发服务器端口
    open: true,          // 自动打开浏览器
    proxy: {             // 代理设置
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',      // 构建输出目录
    sourcemap: true,     // 生成 sourcemap 文件
    rollupOptions: {
      output: {
        // 静态资源打包分类
        assetFileNames: 'assets/[name].[hash].[ext]',
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',
      },
    },
  },
});

3.Webpack VS Vite

4.总结

选择 Webpack：

• 项目需要高度自定义的打包配置。
• 需要兼容旧版浏览器。
• 项目规模较大，依赖复杂。

选择 Vite：

• 追求极速的开发体验。
• 项目基于现代前端框架（如 Vue 3、React）。
• 项目规模较小，配置简单。

总之:Webpack 是前端构建工具的“老大哥”，功能强大但配置复杂，适合大型项目。Vite 是新一代构建工具，以极速开发体验著称，适合中小型项目和现代前端框架。

5.Webpack为什么比Vite快

• 利用浏览器对ESM的原生支持：
  Vite直接利用了现代浏览器对ES Modules（ESM）的原生支持。在开发环境下，这意味着Vite可以直接运行源代码，无需像Webpack那样先进行打包。由于省去了打包的过程，Vite的启动速度非常快。相比之下，Webpack需要将源代码打包成浏览器可识别的格式，这个过程会消耗一定的时间。
• 按需编译：
  Vite采用了按需编译的策略，只有当请求某个模块时，才会对该模块进行编译。这种按需加载的方式极大地缩减了编译时间。而Webpack在构建时会对整个项目进行扫描和分析，无论模块是否被使用，都会被打包进最终的输出文件中，这会增加构建的时间。特别是在大型项目中，这种差异会更加明显。
• 不同的构建机制：
  Webpack是基于Node.js实现的，而Vite则使用了Esbuild进行预构建依赖。Esbuild是一个用Go语言编写的打包工具，其构建速度比以Node.js编写的打包器要快得多。这是因为Go语言在编译和执行速度上具有优势，使得Esbuild能够更快速地完成依赖的预构建。
• 高效的热更新机制：
  在开发过程中，Vite支持快速的热更新，只会更新已更改的文件，而不需要重新构建整个应用程序。这大大提高了开发效率。相比之下，Webpack在热更新方面可能不如Vite高效。