面试题：Vue懒加载结合Webpack与Vite，在大型项目中如何综合运用二者优势实现极致的打包优化？

1. 构建工具选择

开发阶段（快速迭代需求场景）：
- 使用Vite：Vite基于ES模块，利用浏览器原生支持，冷启动极快，模块热更新（HMR）也非常高效。它不需要像Webpack那样进行复杂的打包过程，极大提升开发体验。
- 配置：在项目根目录创建vite.config.js，根据项目需求配置resolve、server等选项。例如，设置resolve.alias来简化路径引用，server.proxy进行开发环境代理配置。
生产阶段（追求极致性能场景）：
- 使用Webpack：Webpack生态丰富，插件众多，在处理复杂的打包需求和优化上有优势。它对代码的压缩、分割等处理更为成熟。
- 配置：在项目根目录创建webpack.config.js，配置entry、output、module、plugins等。如使用terser-webpack-plugin进行代码压缩，html-webpack-plugin生成HTML文件。

2. Vue懒加载技术

路由懒加载：
- 在Vue Router配置中，使用动态导入语法实现路由组件的懒加载。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      name: 'About',
      component: () => import('./views/About.vue')
    }
  ]
});

- 这样只有在访问到对应路由时，才会加载相关组件，减少初始加载体积。

组件懒加载：
- 使用vue - lazy - load插件，安装后在Vue项目入口文件引入并使用：

import Vue from 'vue';
import VueLazyload from 'vue - lazy - load';
Vue.use(VueLazyload, {
  // 配置项，例如加载失败图片等
  loading: require('./assets/loading.gif'),
  error: require('./assets/error.jpg')
});

- 在模板中，对图片等组件使用懒加载指令，如`<img v - lazy="imageUrl">`。

3. 配置调整

Webpack配置调整：
- 代码分割：使用splitChunks插件，将第三方库和公共代码进行分割。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

- **Tree - shaking**：确保项目使用ES6模块，Webpack会自动进行Tree - shaking，去除未使用的代码。在`package.json`中设置`"type": "module"`，并在`webpack.config.js`中配置`mode: 'production'`，因为生产模式下Webpack会开启一些优化，包括Tree - shaking。

Vite配置调整：
- CSS代码拆分：Vite默认会将CSS提取到单独文件。可以通过css.extract选项进行更细粒度控制。例如，设置css.extract = { ignoreOrder: true }来忽略CSS顺序，提升构建速度。
- 优化依赖预 - 构建：Vite会自动对依赖进行预 - 构建。可以通过optimizeDeps.include选项手动指定需要预 - 构建的依赖，通过optimizeDeps.exclude排除不需要预 - 构建的依赖。

4. 插件使用

Webpack插件：
- OptimizeCSSAssetsPlugin：用于优化CSS资源，压缩CSS代码。安装后在webpack.config.js中配置：

const OptimizeCSSAssetsPlugin = require('OptimizeCSSAssetsPlugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue - loader',
          {
            loader: 'css - loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss - loader'
        ]
      }
    ]
  },
  plugins: [
    new OptimizeCSSAssetsPlugin({})
  ]
};

- **PurgeCSSWebpackPlugin**：用于移除未使用的CSS代码。配置如下：

const PurgeCSSPlugin = require('purgecss - webpack - plugin');
const glob = require('glob - all');
const PATHS = {
  src: path.join(__dirname,'src')
};
module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true}),
      safelist: function () {
        return {
          standard: ['body - dark']
        };
      }
    })
  ]
};

Vite插件：
- vite - plugin - optimize - persist：用于持久化Vite的依赖优化缓存，减少重新构建时的依赖处理时间。安装后在vite.config.js中使用：

import optimizePersist from 'vite - plugin - optimize - persist';
export default {
  plugins: [
    optimizePersist()
  ]
};

- **vite - plugin - html**：用于在构建HTML时进行更灵活的操作，如注入环境变量等。安装后在`vite.config.js`中使用：

import vitePluginHtml from 'vite - plugin - html';
export default {
  plugins: [
    vitePluginHtml({
      inject: {
        data: {
          env: process.env.NODE_ENV
        }
      }
    })
  ]
};

5. 资源管理

图片资源：
- 压缩：使用image - webpack - loader（Webpack）或image - optimizer - vite（Vite）插件对图片进行压缩。在Webpack中，在webpack.config.js的module.rules中配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'image - webpack - loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

- **选择合适格式**：根据图片用途，选择合适的图片格式。如对于简单图标，使用SVG格式；对于照片，根据浏览器支持情况，优先考虑WebP格式。

字体资源：
- 按需加载：如果项目使用自定义字体，不要一次性加载所有字体文件。可以根据需要加载特定的字重和字符集。例如，只加载英文字符集对应的字体文件，减少字体文件体积。
- 压缩：使用工具对字体文件进行压缩，减小文件大小。

通过以上综合策略，从构建工具选择、懒加载技术应用、配置调整、插件使用以及资源管理等多方面入手，可以实现大型Vue项目在不同场景下的极致打包优化。

星途面试题库

面试题：Vue懒加载结合Webpack与Vite，在大型项目中如何综合运用二者优势实现极致的打包优化？

知识考点

面试题答案

1. 构建工具选择

2. Vue懒加载技术

3. 配置调整

4. 插件使用

5. 资源管理