面试题：如何解决 Vue 打包时 vendor 文件过大的问题？

在 Vue 项目中，打包后的 vendor 文件（即第三方库文件）可能会非常大，导致页面加载速度变慢。以下是解决 vendor 文件过大的几种常见方法：

1. 代码分割（Code Splitting）

通过代码分割将 vendor 文件拆分为多个较小的文件，按需加载。

1.1 路由懒加载

使用 Vue Router 的懒加载功能，将不同路由对应的组件拆分为独立的文件。

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

1.2 组件懒加载

对于非首屏的组件，可以使用懒加载。

const LazyComponent = () => import(/* webpackChunkName: "lazy" */ './components/LazyComponent.vue');

2. Tree Shaking

通过 Tree Shaking 移除未使用的代码，减少打包体积。

2.1 使用 ES 模块

确保第三方库支持 ES 模块（如 lodash-es 而不是 lodash）。

import { debounce } from 'lodash-es';

2.2 配置 Webpack

在 vue.config.js 中启用 Tree Shaking。

module.exports = {
  configureWebpack: {
    optimization: {
      usedExports: true,
    },
  },
};

3. 按需引入第三方库

避免全量引入第三方库，只引入需要的部分。

3.1 按需引入 Element UI

import { Button, Input } from 'element-ui';
Vue.use(Button);
Vue.use(Input);

3.2 按需引入 Lodash

import debounce from 'lodash/debounce';

4. 使用 CDN

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

4.1 配置 `externals`

在 vue.config.js 中配置 externals，将第三方库从打包文件中排除。

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'element-ui': 'ELEMENT',
    },
  },
};

4.2 在 HTML 中引入 CDN

在 public/index.html 中引入 CDN 链接。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>

5. 压缩代码

通过压缩代码减少文件体积。

5.1 启用 Gzip 压缩

在 vue.config.js 中配置 compression-webpack-plugin。

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240, // 超过 10KB 的文件才压缩
      }),
    ],
  },
};

5.2 启用 Brotli 压缩

Brotli 是一种比 Gzip 更高效的压缩算法。

const BrotliPlugin = require('brotli-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new BrotliPlugin({
        asset: '[path].br[query]',
        test: /\.(js|css)$/,
        threshold: 10240,
      }),
    ],
  },
};

6. 分析打包文件

使用工具分析打包文件，找出体积过大的原因。

6.1 使用 `webpack-bundle-analyzer`

在 vue.config.js 中配置 webpack-bundle-analyzer。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin(),
    ],
  },
};

运行构建命令后，打开生成的报告页面，查看各个模块的体积。

7. 优化图片和字体

压缩图片和字体文件，减少资源体积。

7.1 使用 `image-webpack-loader`

在 vue.config.js 中配置 image-webpack-loader。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.65, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 },
      });
  },
};

7.2 使用 `url-loader` 或 `file-loader`

将小图片转换为 Base64 编码，减少 HTTP 请求。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192, // 小于 8KB 的图片转换为 Base64
      });
  },
};