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

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

为什么需要构建优化？

Vite入门

配置Vite

// 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' } });

优化配置

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

Rollup进阶

代码分割

// 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'] };

树摇优化

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

实战案例

构建分析

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

// vite.config.js import { visualizer } from 'rollup-plugin-visualizer'; export default defineConfig({ plugins: [react(), visualizer()] });

路径别名

// vite.config.js import path from 'path'; export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') } } });

最佳实践

1. 按需加载

const HeavyComponent = lazy(() => import('./HeavyComponent')); function App() { return ( <Suspense fallback={<Loading />}> <HeavyComponent /> </Suspense> ); }

2. 图片优化

// vite.config.js import viteImagemin from 'vite-plugin-imagemin'; export default defineConfig({ plugins: [viteImagemin()] });

3. 环境变量

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

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

总结

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

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

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

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