前端工程化：Vite与Rollup构建优化

大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊前端工程化这个重要话题。作为一个全栈开发者，构建工具是日常开发中不可或缺的一部分。今天就来分享一下Vite和Rollup的构建优化技巧。

为什么需要构建优化？

问题	说明
构建速度慢	影响开发效率
包体积大	影响加载速度
资源重复	增加不必要的网络请求
缓存失效	导致用户重复下载

Vite入门

配置Vite

javascript 复制代码

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'terser'
  }
});

优化配置

javascript 复制代码

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          lodash: ['lodash']
        }
      }
    },
    chunkSizeWarningLimit: 500
  }
});

Rollup进阶

代码分割

javascript 复制代码

// rollup.config.js
import { terser } from 'rollup-plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
    sourcemap: false
  },
  plugins: [resolve(), commonjs(), terser()],
  external: ['react', 'react-dom']
};

树摇优化

javascript 复制代码

// package.json
{
  "sideEffects": false
}

实战案例

构建分析

bash 复制代码

npm install rollup-plugin-visualizer --save-dev

javascript 复制代码

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [react(), visualizer()]
});

路径别名

javascript 复制代码

// vite.config.js
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

最佳实践

1. 按需加载

javascript 复制代码

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

2. 图片优化

javascript 复制代码

// vite.config.js
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [viteImagemin()]
});

3. 环境变量

javascript 复制代码

// .env
VITE_APP_API_URL=https://api.example.com

javascript 复制代码

// src/api.js
const apiUrl = import.meta.env.VITE_APP_API_URL;

总结

前端工程化是提高开发效率和应用性能的关键。通过合理配置Vite和Rollup，可以显著优化构建流程和产物质量。

我的鬃狮蜥Hash对构建优化也有自己的理解------它总是用最有效的方式捕捉蟋蟀，这也许就是自然界的"构建优化"吧！

如果你对前端工程化有任何问题，欢迎留言交流！我是欧阳瑞，极客之路，永无止境！

技术栈：Vite · Rollup · 前端工程化