面试题：Webpack生产环境安全配置与性能平衡

配置思路

第三方脚本审查：
- 使用html-webpack-inline-source-plugin等插件，确保引入的第三方脚本符合安全策略。对于直接在HTML中引入的第三方脚本，此插件可以将脚本内联到HTML中，并在构建时对脚本内容进行检查，防止恶意代码注入。
- 利用CSP - Content Security Policy相关配置，在HTML头部设置Content - Security - Policy元数据，限制脚本的来源，只允许从指定的、经过审查的源加载脚本。例如，通过设置script - src指令，只允许特定域名下的脚本加载。
性能优化：
- 代码压缩：使用terser - webpack - plugin插件对JavaScript代码进行压缩。该插件在生产模式下默认启用，它通过删除冗余代码、缩短变量名等方式减小文件体积，提高加载速度。
- 分包策略：运用splitChunksPlugin，将第三方库和业务代码分开打包。这样可以利用浏览器的缓存机制，当第三方库未更新时，浏览器可以直接从缓存中加载，减少重复下载，提高加载效率。
- 懒加载：对于非首屏必需的第三方脚本，采用动态导入（import()语法）实现懒加载，只有在需要时才加载脚本，避免首屏加载过多脚本影响速度。

关键插件及工具

html - webpack - inline - source - plugin：用于内联脚本并进行安全审查。
- 安装：npm install html - webpack - inline - source - plugin --save - dev
- 使用示例：

const HtmlWebpackInlineSourcePlugin = require('html - webpack - inline - source - plugin');
module.exports = {
  //...其他配置
  plugins: [
    new HtmlWebpackInlineSourcePlugin()
  ]
};

terser - webpack - plugin：压缩JavaScript代码。
- 安装：默认包含在Webpack中，无需额外安装（Webpack 4+）。
- 使用示例（若需自定义配置）：

const TerserPlugin = require('terser - webpack - plugin');
module.exports = {
  //...其他配置
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 开启多进程压缩
        terserOptions: {
          compress: {
            drop_console: true // 移除console.log
          }
        }
      })
    ]
  }
};

splitChunksPlugin：分包工具。
- 安装：默认包含在Webpack中，无需额外安装（Webpack 4+）。
- 使用示例：

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

星途面试题库

面试题：Webpack生产环境安全配置与性能平衡

知识考点

面试题答案

配置思路

关键插件及工具