Quartz 4

前端构建工具打包与分包优化

7 min read

前端构建工具打包与分包优化指南：Vite 和 Webpack 实战

在现代前端开发中，打包优化和分包是提升应用性能的关键技术。无论是使用 Vite 还是 Webpack，合理的优化策略都可以显著减少加载时间，提升用户体验。本文将详细介绍 Vite 和 Webpack 的打包优化与分包方法，帮助你构建高性能的前端应用。

一、Vite 打包优化

Vite 是一个基于 ES 模块的现代构建工具，具有快速的开发服务器和高效的打包能力。以下是 Vite 的打包优化方法：

1. 代码分割

Vite 默认支持代码分割，但可以通过配置进一步优化：

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将第三方库单独打包
          vendor: ['react', 'react-dom', 'lodash'],
          // 按路由分割代码
          home: ['src/pages/Home.jsx'],
          about: ['src/pages/About.jsx'],
        },
      },
    },
  },
});

2. Tree Shaking

Vite 默认支持 Tree Shaking，但需要确保代码是 ESM 格式，并且避免副作用代码。

3. 压缩代码

Vite 使用 terser 进行代码压缩，默认开启。可以通过配置调整压缩选项：

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  build: {
    minify: 'terser', // 默认是 'esbuild'，可以改为 'terser'
    terserOptions: {
      compress: {
        drop_console: true, // 移除 console.log
      },
    },
  },
});

4. 图片压缩

使用 vite-plugin-imagemin 插件压缩图片：

npm install vite-plugin-imagemin -D

配置：

import { defineConfig } from 'vite';
import imagemin from 'vite-plugin-imagemin';
 
export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: { optimizationLevel: 7 },
      mozjpeg: { quality: 70 },
      pngquant: { quality: [0.8, 0.9] },
      svgo: {
        plugins: [{ name: 'removeViewBox', active: false }],
      },
    }),
  ],
});

5. Gzip 压缩

使用 vite-plugin-compression 插件生成 Gzip 文件：

npm install vite-plugin-compression -D

配置：

import { defineConfig } from 'vite';
import viteCompression from 'vite-plugin-compression';
 
export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip', // 压缩算法
      ext: '.gz', // 文件扩展名
    }),
  ],
});

6. CDN 加速

将第三方库通过 CDN 引入，减少打包体积：

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['react', 'react-dom'], // 外部化依赖
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

在 HTML 中引入 CDN：

<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

7. 预渲染

使用 vite-plugin-ssg 插件实现静态站点生成（SSG），减少首屏加载时间：

npm install vite-plugin-ssg -D

配置：

import { defineConfig } from 'vite';
import { ViteSSG } from 'vite-plugin-ssg';
 
export default defineConfig({
  plugins: [ViteSSG()],
});

二、Webpack 打包优化

Webpack 是一个功能强大的打包工具，但配置复杂，优化需要更多手动操作。

1. 代码分割

使用 SplitChunksPlugin 进行代码分割：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

2. Tree Shaking

确保 mode 设置为 production，并启用 usedExports：

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

3. 压缩代码

使用 TerserPlugin 压缩代码：

npm install terser-webpack-plugin -D

配置：

const TerserPlugin = require('terser-webpack-plugin');
 
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

4. 图片压缩

使用 image-minimizer-webpack-plugin 压缩图片：

npm install image-minimizer-webpack-plugin -D

配置：

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ['imagemin-mozjpeg', { quality: 70 }],
            ['imagemin-pngquant', { quality: [0.8, 0.9] }],
          ],
        },
      },
    }),
  ],
};

5. Gzip 压缩

使用 compression-webpack-plugin 生成 Gzip 文件：

npm install compression-webpack-plugin -D

配置：

const CompressionPlugin = require('compression-webpack-plugin');
 
module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
    }),
  ],
};

6. CDN 加速

将第三方库通过 CDN 引入：

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

在 HTML 中引入 CDN：

<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

7. 缓存优化

使用 cache 选项和 contenthash 提高缓存命中率：

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
  },
  cache: {
    type: 'filesystem',
  },
};

8. 预渲染

使用 prerender-spa-plugin 实现预渲染：

npm install prerender-spa-plugin -D

配置：

const PrerenderSPAPlugin = require('prerender-spa-plugin');
 
module.exports = {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/', '/about'],
    }),
  ],
};

三、分包的最佳实践

1. 按路由分包

  • 将不同路由对应的组件拆分成单独的 chunk，按需加载。
  • 适用于单页应用（SPA）。

2. 按功能分包

  • 将不同功能的模块拆分成单独的 chunk。
  • 例如，将用户管理、订单管理等模块分开。

3. 第三方库分包

  • 将第三方库（如 React、Vue、Lodash）单独打包，利用浏览器缓存。

4. 公共代码分包

  • 将公共代码（如工具函数、样式）拆分成单独的 chunk，避免重复加载。

5. 动态加载非关键资源

  • 将非关键资源（如图片、视频）延迟加载，减少初始加载时间。

四、总结

Vite 优化重点：

  • 代码分割
  • Tree Shaking
  • 图片压缩
  • Gzip 压缩
  • CDN 加速
  • 预渲染

Webpack 优化重点：

  • 代码分割
  • Tree Shaking
  • 压缩代码
  • 图片压缩
  • Gzip 压缩
  • CDN 加速
  • 缓存优化
  • 预渲染

通过合理的打包优化和分包策略，可以有效提升应用的加载性能和用户体验。根据项目需求选择合适的优化方式，并结合缓存、CDN 等优化手段，进一步提升性能。

Graph View