前端核心知识点梳理与面试复习

前端核心知识点梳理与面试复习 | 极客日志

/**
 * 模拟一个简单的 JSONP 实现
 */
function jsonp({ url, params, callbackName }) {
  return new Promise((resolve) => {
    // 1. 创建 script 标签
    const script = document.createElement('script');
    // 2. 将回调函数挂载到 window，供服务端调用
    window[callbackName] = function(data) {
      resolve(data);
      document.body.removeChild(script); // 善后工作
      delete window[callbackName];
    };
    // 3. 构建 URL，带上 callback 参数
    const query = { ...params, callback: callbackName };
    const queryString = Object.keys(query).map(key => `${key}=${query[key]}`).join('&');
    script.src = `${url}?${queryString}`;
    // 4. 插入页面，触发请求
    document.body.appendChild(script);
  });
}
// 使用示例
// jsonp({ url: 'http://api.test.com/data', callbackName: 'handleRes' }).then(res => console.log(res));

// vite.config.js 示例
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-api.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

const express = require('express');
const app = express();
app.get('/static/logo.png', (req, res) => {
  // 设置强缓存：1 年 (单位：秒)
  res.setHeader('Cache-Control', 'public, max-age=31536000');
  // 或者设置协商缓存 (Express 默认会自动处理 ETag)
  // res.setHeader('Cache-Control', 'no-cache');
  res.sendFile(__dirname + '/logo.png');
});
app.listen(3000);

// 在 Node.js (Express) 中开启 HTTPS 的简单示例
const https = require('https');
const fs = require('fs');
const express = require('express');
const options = {
  key: fs.readFileSync('server.key'), // 私钥
  cert: fs.readFileSync('server.crt') // 证书
};
const app = express();
https.createServer(options, app).listen(443, () => {
  console.log('HTTPS Server running on port 443');
});

console.log('1'); // 同步
setTimeout(() => {
  console.log('2'); // 宏任务
}, 0);
Promise.resolve().then(() => {
  console.log('3'); // 微任务
});
console.log('4'); // 同步
// 输出顺序：1 -> 4 -> 3 -> 2

// service-worker.js 示例
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 如果缓存命中，直接返回；否则走网络请求
      return response || fetch(event.request);
    })
  );
});

配置类型	适用场景	示例	说明
单入口	简单应用、SPA	`'./src/index.js'`	所有代码打包到一个文件
多入口	多页面应用	`{main: './src/index.js', admin: './src/admin.js'}`	每个入口生成独立的 bundle
数组入口	需要前置依赖	`['./src/polyfills.js', './src/index.js']`	按顺序打包，最后合并
动态入口	条件打包	函数返回对象	运行时确定入口，适合复杂场景

配置项	类型	说明	示例值
path	string	输出目录的绝对路径	`path.resolve(__dirname, 'dist')`
filename	string/function	入口文件名模板	`[name].[contenthash:8].js`
chunkFilename	string	非入口 chunk 文件名模板	`[name].[contenthash:8].chunk.js`
publicPath	string	资源公共路径	`'/'` 或 `'https://cdn.example.com/'`
assetModuleFilename	string	静态资源文件名模板	`'assets/[hash][ext][query]'`
clean	boolean/object	是否清理输出目录	`true` 或 `{ dry: true }`
library	object	库配置（打包库时使用）	`{ name: 'MyLibrary', type: 'umd' }`
globalObject	string	全局对象（UMD 模式）	`'this'` 或 `'window'`

占位符	说明	示例
`[name]`	chunk 名称	`main`
`[id]`	chunk ID	`0`
`[hash]`	基于模块内容的哈希	`a1b2c3d4`
`[contenthash]`	基于 chunk 内容的哈希	`e5f6g7h8`
`[chunkhash]`	基于 chunk 的哈希	`i9j0k1l2`
`[ext]`	文件扩展名（不带点）	`js`
`[query]`	URL 查询字符串	`?v=1`

配置项	类型	说明	示例
test	RegExp	匹配文件扩展名	`/.(js
exclude	RegExp/Array	排除的目录	`/node_modules/`
include	RegExp/Array	包含的目录	`[path.resolve(__dirname, 'src')]`
use	String/Object/Array	使用的 Loader	`'babel-loader'` 或 `{ loader: 'babel-loader', options: {...} }`
parser	Object	解析器配置	`{ amd: false }`
generator	Object	生成器配置	`{ dataUrl: (content) => ... }`
type	String	模块类型	`'javascript/auto'`
sideEffects	Boolean/Array	副作用标记	`false`

Loader	作用	生产环境配置	开发环境配置
MiniCssExtractPlugin.loader	提取 CSS 到文件	`MiniCssExtractPlugin.loader`	`style-loader`
css-loader	处理 @import 和 url()	`css-loader`	`css-loader`
postcss-loader	自动添加前缀、压缩	`postcss-loader` + `cssnano`	`postcss-loader` + `autoprefixer`

Loader	顺序	作用	配置要点
style-loader/MiniCssExtractPlugin.loader	1	注入或提取 CSS	生产环境用 MiniCssExtractPlugin
css-loader	2	处理 CSS 导入	`importLoaders` 需要包含后续 loader 数量
postcss-loader	3	自动添加前缀	配置 autoprefixer
sass-loader	4	编译 SASS	可以添加全局变量

配置项	类型	说明	示例
type: 'asset'	字符串	自动内联/外置	`'asset'`
parser.dataUrlCondition	对象	内联条件	`{ maxSize: 8192 }`
generator.filename	字符串	输出文件名	`'images/[name].[hash:8][ext]'`
use	数组	额外处理 loader	`['image-webpack-loader']`

配置项	类型	说明	示例
type	字符串	模块类型	`'asset/resource'`
generator.filename	字符串	输出文件名	`'fonts/[name].[hash:8][ext]'`
generator.publicPath	字符串	公共路径	`'/'`

文件类型	Loader	配置要点
JSON	内置（type: 'json'）	可以使用 JSON5 支持注释
YAML	`yaml-loader`	需要安装 `js-yaml`
XML	`xml-loader`	需要安装 `xml2js`
TOML	`toml-loader`	需要安装 `toml`

配置项	类型	说明	示例
extensions	Array	自动解析的扩展名	`['.js', '.jsx', '.json']`
alias	Object	路径别名	`{'@': path.resolve(__dirname, 'src')}`
modules	Array	模块搜索目录	`['node_modules', 'src']`
mainFields	Array	package.json 字段顺序	`['module', 'main', 'browser']`
symlinks	Boolean	是否解析符号链接	`true`
unsafeCache	Boolean/RegExp	缓存解析结果	`true` 或 `/node_modules/`

// 传统方式（深层路径）
import Header from '../../../components/Header';
// 使用别名（更简洁）
import Header from '@components/Header';
// 在 CSS 中使用（需要配置 css-loader）
.container {
  background: url(@assets/images/bg.jpg);
}

配置项	类型	说明	示例值
template	string	HTML 模板路径	`'./src/index.html'`
filename	string	输出文件名	`'index.html'`
inject	boolean/string	资源注入位置	`'body'`
chunks	Array	注入的 chunk	`['main', 'vendor']`
minify	Object	HTML 压缩配置	`{ removeComments: true }`
meta	Object	meta 标签配置	`{ description: '...' }`
scriptLoading	string	脚本加载方式	`'defer'`

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 其他 meta 标签 -->
  <%= htmlWebpackPlugin.tags.headTags %>
</head>
<body>
  <div></div>
  <!-- 注入的 JS -->
  <%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>

配置项	类型	说明	示例值
filename	string	入口 CSS 文件名	`'[name].[contenthash:8].css'`
chunkFilename	string	非入口 chunk CSS 文件名	`'[name].[contenthash:8].chunk.css'`
ignoreOrder	boolean	忽略顺序警告	`true`
hmr	boolean	是否启用 HMR	`process.env.NODE_ENV === 'development'`

变量名	说明	示例值
process.env.NODE_ENV	Node 环境	`'production'`
process.env.API_BASE_URL	API 地址	`'https://api.example.com'`
process.env.ENABLE_ANALYTICS	功能开关	`true`
process.env.APP_VERSION	应用版本	`'1.0.0'`
DEV	开发环境标志	`false`
PROD	生产环境标志	`true`

// 在代码中直接使用
if (process.env.NODE_ENV === 'production') {
  // 生产环境代码
  disableDebug();
}
if (process.env.ENABLE_ANALYTICS) {
  // 启用分析
  initAnalytics();
}

配置项	类型	说明	示例
from	string	源路径	`'public/'`
to	string	目标路径	`'./'`
toType	string	目标类型	`'dir'`
globOptions	Object	glob 配置	`{ ignore: ['*/.tmp'] }`
filter	function	过滤函数	`(path) => !path.endsWith('.map')`
transform	function	内容转换	`(content) => compress(content)`
transformPath	function	路径转换	`(path) => path.replace('.js', '.min.js')`

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  optimization: {
    // 1. minimize - 是否压缩
    // 作用：控制是否启用压缩
    // 生产环境通常为 true
    minimize: process.env.NODE_ENV === 'production',
    // 2. minimizer - 压缩器
    // 作用：指定使用的压缩器
    minimizer: [
      // JS 压缩器
      new TerserPlugin({
        // 并行压缩
        parallel: true,
        // 使用缓存
        cache: true,
        // 是否使用 source map
        sourceMap: process.env.NODE_ENV === 'development',
        // Terser 配置
        terserOptions: {
          // 压缩选项
          compress: {
            // 删除 console
            drop_console: true,
            // 删除 debugger
            drop_debugger: true,
            // 纯函数优化
            pure_funcs: ['console.log', 'console.info'],
            // 死代码消除
            dead_code: true,
            // 条件语句优化
            conditionals: true,
            // 优化 if-else
            if_return: true,
            // 优化 switch
            switches: true,
            // 优化循环
            loops: true,
            // 优化对象字面量
            properties: true,
            // 优化函数调用
            evaluate: true,
            // 优化算术表达式
            reduce_vars: true,
            // 优化布尔值
            booleans: true,
            // 优化数字
            numbers: true,
            // 优化字符串
            strings: true,
            // 优化正则
            regexp: true,
            // 优化模板字符串
            template_strings: true,
            // 优化箭头函数
            arrow_functions: true,
            // 优化对象方法
            methods: true,
            // 优化默认参数
            defaults: true,
            // 优化解构
            destructuring: true,
            // 优化 spread
            spread: true,
            // 优化 async/await
            async: true,
            // 优化 yield
            yield: true,
            // 优化 class
            classes: true,
            // 优化 let/const
            let_vars: true,
            // 优化 const
            const_vars: true,
            // 优化 for-of
            for_of: true,
            // 优化 for-in
            for_in: true,
            // 优化 export
            export: true,
            // 优化 import
            import: true,
            // 优化 module
            module: true,
            // 优化 strict mode
            strict: true,
            // 优化 this
            this: true,
            // 优化 arguments
            arguments: true,
            // 优化 eval
            eval: false,
            // 优化 hoist_vars
            hoist_vars: false,
            // 优化 hoist_funs
            hoist_funs: false,
            // 优化 hoist_props
            hoist_props: false,
            // 优化 hoist_func_decls
            hoist_func_decls: false,
            // 优化 pure_getters
            pure_getters: 'strict',
            // 优化 keep_fargs
            keep_fargs: false,
            // 优化 keep_fnames
            keep_fnames: false,
            // 优化 keep_classnames
            keep_classnames: false,
            // 优化 keep_infinity
            keep_infinity: false,
            // 优化 side_effects
            side_effects: true,
            // 优化 unused
            unused: true,
            // 优化 warnings
            warnings: false
          },
          // 混淆选项
          mangle: {
            // 保留类名
            keep_classnames: false,
            // 保留函数名
            keep_fnames: false,
            // Safari 10 兼容
            safari10: true,
            // 属性名混淆
            properties: {
              // 保留的属性名
              reserved: ['__esModule', 'default'],
              // 是否混淆属性名
              regex: null,
              // 是否使用 debug 属性
              debug: false,
              // 是否使用保留字
              reserved_names: null
            }
          },
          // 输出选项
          output: {
            // 保留注释
            comments: false,
            // 保留版权注释
            preserve_line: false,
            // 美化输出
            beautify: false,
            // ASCII 限制
            ascii_only: false,
            // 引号样式
            quote_style: 0,
            // 最大行长度
            max_line_len: 32000,
            // 保留行
            preserve_line: false,
            // 保留语句结束
            semicolons: true,
            // 保留缩进
            indent_level: 3,
            // 保留缩进
            indent_start: 0,
            // 保留斜杠
            keep_quoted_props: false,
            // 是否使用括号
            wrap_iife: false,
            // 是否使用括号包裹函数调用
            wrap_func_args: false,
            // 是否使用括号包裹对象
            wrap_object: false,
            // 是否使用括号包裹数组
            wrap_array: false,
            // 是否使用括号包裹函数表达式
            wrap_function_expressions: false,
            // 是否使用括号包裹箭头函数
            wrap_arrow_functions: false,
            // 是否使用括号包裹类
            wrap_classes: false,
            // 是否使用括号包裹条件
            wrap_conditions: false,
            // 是否使用括号包裹循环
            wrap_loops: false,
            // 是否使用括号包裹 switch
            wrap_switches: false,
            // 是否使用括号包裹 try-catch
            wrap_try_catch: false,
            // 是否使用括号包裹对象字面量
            wrap_object_literals: false,
            // 是否使用括号包裹数组字面量
            wrap_array_literals: false,
            // 是否使用括号包裹函数字面量
            wrap_function_literals: false,
            // 是否使用括号包裹类字面量
            wrap_class_literals: false,
            // 是否使用括号包裹条件字面量
            wrap_condition_literals: false,
            // 是否使用括号包裹循环字面量
            wrap_loop_literals: false,
            // 是否使用括号包裹 switch 字面量
            wrap_switch_literals: false,
            // 是否使用括号包裹 try-catch 字面量
            wrap_try_catch_literals: false,
            // 是否使用括号包裹对象字面量
            wrap_object_literal_expressions: false,
            // 是否使用括号包裹数组字面量
            wrap_array_literal_expressions: false,
            // 是否使用括号包裹函数字面量
            wrap_function_literal_expressions: false,
            // 是否使用括号包裹类字面量
            wrap_class_literal_expressions: false,
            // 是否使用括号包裹条件字面量
            wrap_condition_literal_expressions: false,
            // 是否使用括号包裹循环字面量
            wrap_loop_literal_expressions: false,
            // 是否使用括号包裹 switch 字面量
            wrap_switch_literal_expressions: false,
            // 是否使用括号包裹 try-catch 字面量
            wrap_try_catch_literal_expressions: false
          },
          // 源码选项
          sourceMap: {
            // 是否包含源码
            includeSources: false,
            // 是否使用 source map
            file: null,
            // 是否使用 source map url
            url: null
          }
        }
      }),
      // CSS 压缩器
      new CssMinimizerPlugin({
        // 并行压缩
        parallel: true,
        // 使用缓存
        cache: true,
        // 是否使用 source map
        sourceMap: process.env.NODE_ENV === 'development',
        // cssnano 配置
        minimizerOptions: {
          preset: [
            'default',
            {
              // 优化选项
              discardComments: {
                removeAll: true
              },
              // 移除空规则
              discardEmpty: true,
              // 合并规则
              mergeLonghand: true,
              // 合并媒体查询
              mergeRules: true,
              // 优化 calc()
              calc: {
                precision: 5
              },
              // 优化颜色
              colormin: true,
              // 优化转换
              reduceTransforms: true,
              // 优化 svgo
              svgo: false
            }
          ]
        }
      })
    ],
    // 3. splitChunks - 代码分割
    // 作用：提取公共代码
    splitChunks: {
      // 4. chunks - 适用的 chunk 类型
      // 选项：'initial' | 'async' | 'all'
      // 'initial': 入口 chunk
      // 'async': 异步 chunk（动态导入）
      // 'all': 所有 chunk
      chunks: 'all',
      // 5. minSize - 最小大小
      // 作用：chunk 的最小大小（字节）
      // 小于此大小的 chunk 不会被分割
      minSize: 30000, // 30KB
      // 6. maxSize - 最大大小
      // 作用：chunk 的最大大小（字节）
      // 超过此大小的 chunk 会被分割
      maxSize: 250000, // 250KB
      // 7. minChunks - 最小引用次数
      // 作用：模块被引用的最小次数
      // 才能被提取到公共 chunk
      minChunks: 2,
      // 8. maxAsyncRequests - 最大异步请求数
      // 作用：按需加载时最大的并行请求数
      maxAsyncRequests: 5,
      // 9. maxInitialRequests - 最大初始请求数
      // 作用：入口 chunk 最大并行请求数
      maxInitialRequests: 3,
      // 10. automaticNameDelimiter - 自动名称分隔符
      // 作用：自动生成 chunk 名称的分隔符
      automaticNameDelimiter: '~',
      // 11. name - chunk 名称
      // 作用：自定义 chunk 名称
      // 函数：(module, chunks, cacheGroupKey) => string
      name: (module, chunks, cacheGroupKey) => {
        return cacheGroupKey;
      },
      // 12. cacheGroups - 缓存组
      // 作用：定义分割规则
      cacheGroups: {
        // 13. vendors - 第三方库
        vendors: {
          // 测试：匹配 node_modules
          test: /[\\/]node_modules[\\/]/,
          // 优先级：数值越小优先级越高
          priority: -10,
          // chunk 名称
          name: 'vendors',
          // 是否复用已存在的 chunk
          reuseExistingChunk: true,
          // 是否强制分割
          enforce: true
        },
        // 14. commons - 公共代码
        commons: {
          // 测试：匹配 src 目录下的公共代码
          test: /[\\/]src[\\/]common[\\/]/,
          // 最小引用次数
          minChunks: 2,
          // 优先级
          priority: -20,
          // 名称
          name: 'commons',
          // 复用
          reuseExistingChunk: true
        },
        // 15. react - React 相关
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          priority: 30,
          reuseExistingChunk: true
        },
        // 16. styles - 样式文件
        styles: {
          // 测试：匹配 CSS 文件
          test: /\.css$/,
          // chunk 类型：所有
          chunks: 'all',
          // 强制分割
          enforce: true,
          // 名称
          name: 'styles',
          // 优先级
          priority: -5,
          // 复用
          reuseExistingChunk: true
        },
        // 17. dynamic - 动态导入
        dynamic: {
          // 测试：匹配动态导入
          test: /[\\/]src[\\/]pages[\\/]/,
          // 只对异步 chunk 生效
          chunks: 'async',
          // 名称
          name: (module, chunks, cacheGroupKey) => {
            return `${cacheGroupKey}-${chunks[0].name}`;
          },
          // 优先级
          priority: 10,
          // 复用
          reuseExistingChunk: true
        }
      }
    },
    // 18. runtimeChunk - 运行时代码
    // 作用：提取 Webpack 运行时代码
    // 选项：boolean | string | object
    // true: 提取为单独文件
    // 'single': 提取为单个文件
    // 'multiple': 每个入口提取一个
    // object: 自定义配置
    runtimeChunk: {
      name: 'runtime'
    },
    // 19. moduleIds - 模块 ID 生成策略
    // 作用：控制模块 ID 的生成方式
    // 选项：'named' | 'deterministic' | 'hashed' | 'size' | 'total-size'
    // 'named': 使用模块路径（开发环境）
    // 'deterministic': 短数字 ID（生产环境，长期缓存）
    moduleIds: process.env.NODE_ENV === 'production' ? 'deterministic' : 'named',
    // 20. chunkIds - chunk ID 生成策略
    // 作用：控制 chunk ID 的生成方式
    // 选项：'named' | 'deterministic' | 'natural'
    chunkIds: process.env.NODE_ENV === 'production' ? 'deterministic' : 'named',
    // 21. nodeEnv - 设置 process.env.NODE_ENV
    // 作用：设置 process.env.NODE_ENV 的值
    nodeEnv: process.env.NODE_ENV || 'development',
    // 22. providedExports - 导出分析
    // 作用：分析模块的导出
    // 用于 Tree Shaking
    providedExports: true,
    // 23. usedExports - 使用分析
    // 作用：分析哪些导出被使用
    // 用于 Tree Shaking
    usedExports: true,
    // 24. sideEffects - 副作用分析
    // 作用：分析模块的副作用
    // 用于 Tree Shaking
    sideEffects: true,
    // 25. concatenateModules - 模块合并
    // 作用：合并多个模块为一个
    // 用于优化包大小
    concatenateModules: process.env.NODE_ENV === 'production',
    // 26. mangleExports - 导出混淆
    // 作用：混淆导出名称
    // 用于优化包大小
    mangleExports: process.env.NODE_ENV === 'production',
    // 27. portableRecords - 便携记录
    // 作用：生成便携的记录文件
    // 用于持久化缓存
    portableRecords: true,
    // 28. realContentHash - 真实内容哈希
    // 作用：使用真实内容哈希
    // 用于长期缓存
    realContentHash: true,
    // 29. emitOnErrors - 错误时是否输出
    // 作用：即使有错误是否输出文件
    // 用于开发环境
    emitOnErrors: false,
    // 30. checkWasmTypes - 检查 WASM 类型
    // 作用：检查 WASM 模块类型
    // 用于 WASM 模块
    checkWasmTypes: true,
    // 31. minimize - 是否最小化
    // 作用：覆盖 optimization.minimize
    // 优先级更高
    minimize: true,
    // 32. removeAvailableModules - 移除可用模块
    // 作用：移除重复模块
    removeAvailableModules: true,
    // 33. removeEmptyChunks - 移除空 chunk
    // 作用：移除不包含模块的 chunk
    removeEmptyChunks: true,
    // 34. mergeDuplicateChunks - 合并重复 chunk
    // 作用：合并内容相同的 chunk
    mergeDuplicateChunks: true
  }
};

配置项	类型	说明	示例
minimize	boolean	是否压缩	`process.env.NODE_ENV === 'production'`
minimizer	Array	压缩器配置	`[new TerserPlugin(), new CssMinimizerPlugin()]`
splitChunks	Object	代码分割配置	`{ chunks: 'all', cacheGroups: {...} }`
runtimeChunk	boolean/string	运行时代码提取	`'single'`
moduleIds	string	模块 ID 策略	`'deterministic'`
usedExports	boolean	使用分析（Tree Shaking）	`true`
sideEffects	boolean	副作用分析（Tree Shaking）	`true`

配置项	类型	说明	示例
static	Object	静态文件配置	`{ directory: path.join(__dirname, 'public') }`
host	string	主机地址	`'localhost'`
port	number/string	端口号	`3000`
open	boolean/string	自动打开浏览器	`true`
hot	boolean	热模块替换	`true`
compress	boolean	Gzip 压缩	`true`
historyApiFallback	boolean/Object	SPA 路由支持	`true`
proxy	Object	代理配置	`{ '/api': { target: '...' } }`
headers	Object	响应头	`{ 'X-Custom-Header': 'value' }`
client	Object	客户端配置	`{ overlay: { errors: true } }`

proxy: {
  // 简单代理
  '/api': 'http://localhost:8080',
  // 完整配置
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true, // 更改请求头中的 host
    pathRewrite: {
      '^/api': '' // 重写路径
    },
    secure: false, // HTTPS 证书验证
    ws: true, // WebSocket 代理
    bypass: (req, res) => {
      // 特定条件不代理
      if (req.headers.accept.includes('html')) {
        return '/index.html';
      }
    }
  }
}

模式	速度	质量	适用场景
eval	极快	差	开发环境
eval-source-map	快	较好	开发环境
cheap-module-eval-source-map	快	中等	开发环境
source-map	慢	最好	生产环境（需要调试）
hidden-source-map	慢	最好	生产环境（调试，但不显示）
nosources-source-map	慢	中等	生产环境（不暴露源码）

// Webpack 的开发流程
1. 打包整个应用 → 生成 bundle.js
2. 启动本地服务器
3. 每次修改代码 → 重新打包 → 热更新
4. 项目越大，打包时间越长

Webpack：预先打包
所有模块先打包成 bundle.js，浏览器下载并执行
Vite：按需编译
浏览器请求时，Vite 动态编译模块并返回
无需等待整个应用打包完成

浏览器请求 → Webpack 打包 → 生成 bundle → 返回 HTML → 执行 JS
↓
每次修改都重复

浏览器请求 → Vite 按需编译 → 动态返回 ESM 模块
↓
只编译当前需要的模块

// node_modules 中的依赖通常是 CommonJS 或 UMD 格式
// Vite 需要将它们转换为 ESM
// 转换前（CommonJS）
module.exports = { default: 'value' };
// 转换后（ESM）
export default { default: 'value' };

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  // 1. 基础路径
  // 作用：部署路径
  // 示例：部署到 GitHub Pages 时设置为'/repository-name/'
  base: '/',
  // 2. 开发服务器配置
  server: {
    // 主机地址
    host: 'localhost',
    // 端口
    port: 3000,
    // 是否自动打开浏览器
    open: true,
    // HTTPS 配置
    https: false,
    // 热更新配置
    hmr: {
      overlay: true, // 错误覆盖层
      clientPort: 3000 // 客户端端口
    },
    // 代理配置
    proxy: {
      // 基础代理
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // WebSocket 代理
      '/ws': {
        target: 'ws://localhost:8080',
        ws: true,
        changeOrigin: true
      }
    },
    // 3. 预览服务器配置
    preview: {
      port: 4173,
      open: true
    }
  },
  // 4. 构建配置
  build: {
    // 输出目录
    outDir: 'dist',
    // 静态资源目录
    assetsDir: 'assets',
    // 是否生成 source map
    sourcemap: false,
    // 是否压缩
    minify: 'terser', // 'terser' | 'esbuild' | false
    // 代码分割配置
    rollupOptions: {
      // 入口配置
      input: {
        main: './index.html',
        // 多页面应用
        // admin: './admin.html'
      },
      // 输出配置
      output: {
        // 手动代码分割
        manualChunks: (id) => {
          // 将 node_modules 中的依赖分割到 vendor
          if (id.includes('node_modules')) {
            return 'vendor';
          }
          // 将特定模块分割
          if (id.includes('src/pages')) {
            return 'pages';
          }
        },
        // 资源文件命名
        entryFileNames: '[name].[hash].js',
        chunkFileNames: '[name].[hash].js',
        assetFileNames: '[name].[hash].[ext]'
      }
    },
    // 大小警告阈值
    chunkSizeWarningLimit: 500, // 500KB
    // 是否报告分析
    reportCompressedSize: true
  },
  // 5. CSS 配置
  css: {
    // 预处理器配置
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        modifyVars: {
          'primary-color': '#1DA57A'
        }
      }
    },
    // 是否提取 CSS 到独立文件
    extract: true,
    // 是否启用 CSS 模块
    modules: {
      // 生成的类名格式
      generateScopedName: '[name]__[local]--[hash:base64:5]',
      // 配置文件
      localsConvention: 'camelCaseOnly'
    },
    // 是否启用 source map
    devSourcemap: true
  },
  // 6. 解析配置
  resolve: {
    // 路径别名
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@utils': '/src/utils',
      '@assets': '/src/assets',
      // 解决模块重复问题
      'react': '/node_modules/react/index.js',
      'react-dom': '/node_modules/react-dom/index.js'
    },
    // 扩展名
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
    // 条件导出
    conditions: ['import', 'require', 'node', 'default'],
    // 主字段
    mainFields: ['module', 'main', 'browser']
  },
  // 7. 环境变量配置
  envPrefix: 'VITE_',
  // 8. 定义全局变量
  define: {
    '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
    '__BUILD_TIME__': Date.now()
  },
  // 9. 插件配置
  plugins: [
    // React 支持
    react({
      // Babel 配置
      babel: {
        plugins: [
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: true }]
        ]
      },
      // 是否启用 Fast Refresh
      fastRefresh: true,
      // 是否启用 React 17 JSX 转换
      jsxRuntime: 'automatic'
    }),
    // Vue 支持（如果使用 Vue）
    vue({
      // Vue 配置
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('ion-')
        }
      }
    }),
    // 旧版浏览器支持
    legacy({
      targets: ['defaults', 'not IE 11'],
      polyfills: [
        'es.promise.finally',
        'es.map',
        'es.set',
        'es.array.find-index',
        'es.promise',
        'es.object.assign'
      ],
      modernPolyfills: ['web.dom.iterable']
    }),
    // SVG 作为 React 组件
    // 需要安装：vite-plugin-svgr
    // import svgr from 'vite-plugin-svgr';
    // svgr()
  ],
  // 10. 测试配置
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.js',
    coverage: {
      reporter: ['text', 'json', 'html'],
      exclude: [
        'node_modules/',
        'tests/'
      ]
    }
  }
});

# .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME=My Application
VITE_ENABLE_ANALYTICS=true

# .env.development
VITE_API_URL=http://localhost:8080
VITE_DEBUG=true

# .env.production
VITE_API_URL=https://api.example.com
VITE_DEBUG=false

// 访问环境变量
const apiUrl = import.meta.env.VITE_API_URL;
const debug = import.meta.env.VITE_DEBUG === 'true';
// 类型提示（创建 src/vite-env.d.ts）
/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_NAME: string;
  readonly VITE_ENABLE_ANALYTICS: boolean;
}
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

// vite.config.js
import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin.html'),
        about: resolve(__dirname, 'about.html'),
        contact: resolve(__dirname, 'contact.html')
      }
    }
  },
  plugins: [
    // 多页面 HTML 插件
    {
      name: 'multi-page-plugin',
      transformIndexHtml(html) {
        return html;
      }
    }
  ]
});

// vite.config.js (库开发)
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    // 输出格式
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLibrary',
      fileName: (format) => `my-library.${format}.js`
    },
    // 外部依赖
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  },
  // 不需要插件（除非需要特定转换）
  plugins: []
});

特性	Webpack	Vite	优势方
冷启动时间	随项目增大而增长	几乎恒定（<1 秒）	Vite
热更新速度	1-5 秒	<100ms	Vite
配置复杂度	高（需要大量配置）	低（开箱即用）	Vite
TypeScript 支持	需要配置 loader	原生支持	Vite
CSS 处理	需要配置 loader	原生支持	Vite
代码分割	手动配置	自动优化	Vite
Tree Shaking	需要配置	Rollup 原生支持	Vite

特性	Webpack	Vite (Rollup)
Tree Shaking	支持，但需要配置	支持，更彻底
代码分割	支持，配置复杂	支持，自动优化
输出格式	多种	多种，更灵活
构建速度	较慢	较快（Rollup 效率高）
包大小	较大	较小（Tree Shaking 更优）

// vite.config.js
import { defineConfig } from 'vite';

// 自定义插件示例
function myPlugin() {
  return {
    name: 'my-custom-plugin',
    // 转换钩子
    transform(code, id) {
      if (id.endsWith('.js')) {
        // 在 JS 文件末尾添加注释
        return {
          code: code + '\n// My custom plugin added this',
          map: null
        };
      }
    },
    // HTML 转换钩子
    transformIndexHtml(html) {
      return html.replace(
        '</body>',
        '<script>console.log("Plugin added script")</script></body>'
      );
    },
    // 服务器中间件
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url === '/custom') {
          res.end('Custom response from plugin');
        } else {
          next();
        }
      });
    }
  };
}

export default defineConfig({
  plugins: [myPlugin()]
});

// vite.config.js
export default defineConfig({
  css: {
    modules: {
      // 生成的类名格式
      generateScopedName: '[name]__[local]--[hash:base64:5]',
      // 导出命名约定
      localsConvention: 'camelCaseOnly',
      // 配置文件路径
      hashPrefix: 'my-project'
    },
    // 预处理器
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `, // 全局 SCSS 变量
        javascriptEnabled: true
      }
    }
  }
});

// vite.config.js
export default defineConfig({
  build: {
    // 代码分割策略
    rollupOptions: {
      output: {
        // 手动代码分割
        manualChunks: (id) => {
          // 分割 node_modules
          if (id.includes('node_modules')) {
            // 按包名分割
            const packageName = id.match(/node_modules\/([^\/]+)/)?.[1];
            if (packageName) {
              return `vendor-${packageName}`;
            }
            return 'vendor';
          }
          // 分割业务模块
          if (id.includes('src/pages')) {
            const pageName = id.match(/src\/pages\/([^\/]+)/)?.[1];
            if (pageName) {
              return `page-${pageName}`;
            }
          }
          if (id.includes('src/components')) {
            return 'components';
          }
          if (id.includes('src/utils')) {
            return 'utils';
          }
        },
        // 资源文件命名（长期缓存）
        entryFileNames: '[name].[hash].js',
        chunkFileNames: '[name].[hash].js',
        assetFileNames: (info) => {
          const ext = info.name.split('.').pop();
          if (ext === 'css') {
            return `[name].[hash].css`;
          }
          if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'].includes(ext)) {
            return `images/[name].[hash].[ext]`;
          }
          if (['woff', 'woff2', 'eot', 'ttf', 'otf'].includes(ext)) {
            return `fonts/[name].[hash].[ext]`;
          }
          return `[name].[hash].[ext]`;
        }
      }
    },
    // 压缩配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log', 'console.info']
      }
    },
    // CSS 代码分割
    cssCodeSplit: true,
    // 资源内联阈值
    assetsInlineLimit: 4096, // 4KB 以下内联
    // 是否生成 Gzip 压缩
    reportCompressedSize: true
  },
  // 性能监控
  logLevel: 'info',
  clearScreen: false
});

前端核心知识点梳理与面试复习

一：从输入 URL 到页面渲染

1. URL 的标准组成部分

URI 和 URL 的区别？

1. 什么是'同源'？

2. 常见的跨域解决方案

A. CORS (Cross-Origin Resource Sharing) - 最主流

B. JSONP (JSON with Padding) - 兼容老旧浏览器

C. Proxy (代理) - 开发环境最常用

3. 面试官深挖：Cookie 如何在跨域中携带？

总结建议

2. DNS 解析过程

1. DNS 解析过程：将域名变为 IP 地址

2. TCP/IP 分层管理：数据是如何打包的？

1. 应用层：

2. 传输层：

3. 网络层 (又名网络互连层)

4. 链路层 (又名数据链路层，网络接口层)

图解

3. TCP 三次握手：确保双方都有收发能力

4. 四次挥手的详细过程

面试高频追问：为什么会有 TIME_WAIT？

代码与性能层面：CLOSE_WAIT 过多怎么办？

5. HTTP 缓存策略

1. 缓存的整体流程

2. 强缓存 (Strong Cache)

关键响应头：

3. 协商缓存 (Negotiation Cache)

4. 模拟代码场景：如何设置缓存？

5. 面试官杀手锏：用户操作对缓存的影响

总结建议

6. 状态码

1. 状态码分类概览

2xx - 成功

3xx - 重定向

4xx - 客户端错误

5xx - 服务器错误

2. 面试官进阶：301 和 302 对 SEO 的影响？

总结建议

7. HTTP 和 HTTPS 的区别

1. 核心区别汇总

2. HTTPS 的'安全'是如何实现的？

3. HTTPS 的握手过程（核心考点）

4. 代码层面：前端需要做什么？

5. 面试官可能追问：什么是中间人攻击（MITM）？

二：浏览器渲染原理

1. 渲染模式的分水岭：后端返回了什么？

1. 服务端渲染 (SSR - Server Side Rendering)

2. 客户端渲染 (CSR - Client Side Rendering)

2. 浏览器渲染的详细流水线 (The Critical Rendering Path)

第一步：构建对象模型

第二步：合并成渲染树 (Render Tree)

第三步：布局 (Layout / Reflow)

第四步：绘制 (Paint / Repaint)

第五步：合成 (Composite)

3. 为什么 JS 会阻塞渲染？

4. 面试必考：重排 (Reflow) 与 重绘 (Repaint)

5. 总结与扩展

三：V8 引擎

四：事件循环 (Event Loop)：异步调度的灵魂

五：浏览器缓存与渲染结合：Service Worker

六：页面加载完整流程图

七：打包工具 webpack 的出现

1. 前端开发的痛点（Webpack 出现前）

2. 模块化开发的需求（CommonJS 的出现）

3. Webpack 的诞生（2012 年）

构建过程：

模块加载 -Loaders 的工作原理：

常见 Loaders：

插件系统（Plugins）

Webpack 配置字典

1、基础配置模块

1.1 entry（入口配置）

1.2 output（输出配置）

2、模块解析规则（Module Rules）

2.1 JS/TS 处理

2.2 CSS 处理（生产环境）

2.3 SASS/SCSS 处理

2.4 图片资源处理

2.5 字体文件处理

面试高频追问：为什么会有 `TIME_WAIT`？

代码与性能层面：`CLOSE_WAIT` 过多怎么办？

4. 面试必考：重排 (Reflow) 与重绘 (Repaint)