面试题：Vue项目中静态资源管理与Webpack性能优化的深度结合

1. 通过Webpack配置优化静态资源管理与提升Vue项目性能

Loader

样式处理：使用 css - loader、style - loader 处理CSS文件，sass - loader、less - loader 处理Sass、Less文件。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style - loader', 'css - loader']
      },
      {
        test: /\.scss$/,
        use: ['style - loader', 'css - loader','sass - loader']
      }
    ]
  }
};

这样可以将样式文件打包进最终的JavaScript文件或独立的CSS文件，减少HTTP请求。

图片处理：url - loader 和 file - loader 用于处理图片。url - loader 当图片较小时（可通过 limit 配置），将图片转化为base64编码嵌入到代码中，减少HTTP请求；图片较大时，使用 file - loader 将图片输出到指定目录并返回其路径。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url - loader',
            options: {
              limit: 8192,
              name: 'images/[name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

Plugin

HtmlWebpackPlugin：自动生成HTML文件，并将打包后的JavaScript和CSS文件引入到HTML中。

const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

MiniCssExtractPlugin：将CSS从JavaScript中提取出来，生成独立的CSS文件，实现CSS的单独加载和缓存。

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css - loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
};

OptimizeCSSAssetsPlugin：压缩CSS文件，减少文件体积。

const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');
module.exports = {
  plugins: [
    new OptimizeCSSAssetsPlugin({})
  ]
};

UglifyJsPlugin：压缩JavaScript代码，去除冗余代码，减小文件体积。

const UglifyJsPlugin = require('uglifyjs - webpack - plugin');
module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({})
    ]
  }
};

代码拆分

splitChunks：将公共代码（如第三方库）拆分出来，单独打包，实现多页面应用或单页面应用中多个入口间的代码复用，并且利用浏览器缓存提升性能。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

2. 高并发场景下的缓存控制与CDN部署

缓存控制

设置文件指纹：通过 output.filename 中的 [contenthash] 占位符为打包后的文件生成基于文件内容的哈希值。当文件内容改变时，哈希值也会改变，浏览器会重新请求新的文件；文件内容未变时，浏览器会使用缓存。

module.exports = {
  output: {
    filename: 'js/[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

设置HTTP缓存头：在服务器端配置，如在Node.js的Express框架中：

const express = require('express');
const app = express();
app.use('/static', express.static('public', {
  maxAge: 31536000 // 1年的缓存时间
}));

CDN部署

配置Webpack输出路径：将打包后的静态资源输出到CDN服务器对应的目录。例如，如果CDN服务器的URL为 https://cdn.example.com，在Webpack配置中：

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/'
  }
};

使用CDN加载第三方库：通过 html - webpack - externals - plugin 插件，在HTML中使用CDN链接引入第三方库，而不是打包进项目中。例如，引入Vue：

const HtmlWebpackExternalsPlugin = require('html - webpack - externals - plugin');
module.exports = {
  plugins: [
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'vue',
          entry: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js',
          global: 'Vue'
        }
      ]
    })
  ]
};

这样在高并发场景下，利用CDN的分布式节点和缓存机制，减少服务器压力，提高用户加载资源的速度，达到最优的用户体验。

星途面试题库

面试题：Vue项目中静态资源管理与Webpack性能优化的深度结合

知识考点

面试题答案

1. 通过Webpack配置优化静态资源管理与提升Vue项目性能

Loader

Plugin

代码拆分

2. 高并发场景下的缓存控制与CDN部署

缓存控制

CDN部署