1688首页作为B类电商的高流量入口，首屏加载必须控制在1.5s内。其Webpack构建优化的本质不是“魔法配置”，而是减少无效编译、极致分包、懒加载与持久化缓存。下面我把这套优化链路拆给你看，并附上可直接用的构建产物分析脚本。

一、 1688首页构建的四大性能杀手

二、 Webpack核心优化配置（关键片段）

以下是最能产生性价比的配置，直接作用于 webpack.config.js

// webpack.config.prod.js (关键优化点)
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
module.exports = {
  mode: 'production',
  entry: './src/main.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash:8].js',
    chunkFilename: 'js/[name].[contenthash:8].chunk.js',
    clean: true,  // 清理旧产物
  },

  // ★ 缓存：增量编译提速 60%+
  cache: {
    type: 'filesystem',
    buildDependencies: { config: [__filename] }
  },

  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') },
    extensions: ['.js', '.vue', '.jsx'],
    // 缩小模块查找范围
    modules: [path.resolve(__dirname, 'node_modules')]
  },

  module: {
    rules: [
      // JS/JSX 用 thread-loader 多进程编译
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['thread-loader', 'babel-loader']
      },
      // CSS 提取单独文件（并行加载，不阻塞JS）
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },

  optimization: {
    // ★ 按变动频率拆分Chunk — 仿1688策略
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // 1. 三方库（不常变）→ 长缓存
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          priority: 20,
          minChunks: 1,
          reuseExistingChunk: true
        },
        // 2. UI组件库单独拆（antd / element-ui）
        ui: {
          test: /[\\/]node_modules[\\/](ant-design-vue|element-ui)[\\/]/,
          name: 'ui-lib',
          priority: 15,
          reuseExistingChunk: true
        },
        // 3. 公共业务组件
        common: {
          name: 'common',
          minChunks: 2,
          priority: 10,
          reuseExistingChunk: true
        }
      }
    },
    // ★ JS压缩用Terser多进程
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: { compress: { drop_console: true } }
      })
    ],
    runtimeChunk: 'single'  // 独立runtime，避免vendor hash变动
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css'
    }),
    // 可选：分析产物体积
    // new BundleAnalyzerPlugin()
  ],

  // ★ 生产关闭 SourceMap 或只放外部
  devtool: false
};

// router.js — 1688首页banner、类目树等重量级组件懒加载
const HomeBanner = () => import(/* webpackChunkName: "home-banner" */ '@/components/HomeBanner.vue');
const CategoryTree = () => import(/* webpackChunkName: "category-tree" */ '@/components/CategoryTree.vue');

三、 Python构建产物分析脚本（附源码）

# analyze_bundle.py
"""
用法：
  webpack --profile --json > stats.json
  python analyze_bundle.py stats.json

输出：
  - Top 20 最大Chunk
  - Node_modules占比
  - 疑似未拆分的超大模块
"""
import json
import sys
import os
from collections import defaultdict
from pathlib import Path
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
def load_stats(stats_path):
    with open(stats_path, 'r', encoding='utf-8') as f:
        return json.load(f)

def get_assets(stats):
    """提取所有产出资源及其大小"""
    assets = stats.get('assets', [])
    return [(a['name'], a['size']) for a in assets if a.get('size')]

def get_module_sizes(stats):
    """按来源(module identifier)聚合大小"""
    modules = stats.get('modules', [])
    module_sizes = defaultdict(int)
    node_sizes = defaultdict(int)
    total_node = 0
    total_all = 0

    for m in modules:
        size = m.get('size', 0)
        identifier = m.get('identifier', '')
        total_all += size

        if '/node_modules/' in identifier:
            # 提取包名，如 lodash / vue / ant-design-vue/dist/...
            parts = identifier.split('/node_modules/')[1].split('/')
            pkg = parts[0]
            if pkg.startswith('@'):  # scoped package: @scope/pkg
                pkg = f"{parts[0]}/{parts[1]}"
            node_sizes[pkg] += size
            total_node += size

    return module_sizes, node_sizes, total_node, total_all

def format_size(size_bytes):
    if size_bytes >= 1024 * 1024:
        return f"{size_bytes / 1024 / 1024:.2f} MB"
    return f"{size_bytes / 1024:.1f} KB"

def analyze(stats_path):
    stats = load_stats(stats_path)

    print(f"\n{'='*55}")
    print(f"📦 Webpack Bundle 分析报告: {Path(stats_path).name}")
    print(f"{'='*55}\n")

    # —— 1. 各资源大小 Top20 ——
    assets = get_assets(stats)
    assets.sort(key=lambda x: x[1], reverse=True)
    print("🔷 Top 20 最大产出文件：")
    for name, sz in assets[:20]:
        flag = "⚠️  >500KB" if sz > 500 * 1024 else ""
        print(f"  {format_size(sz):>10}  {name}  {flag}")
    if len(assets) > 20:
        print(f"  ...共 {len(assets)} 个文件")

    # —— 2. Node_modules 包体积排行 ——
    _, node_sizes, total_node, total_all = get_module_sizes(stats)
    print(f"\n🔷 node_modules 总占比: {total_node/total_all*100:.1f}% "
          f"({format_size(total_node)} / {format_size(total_all)})")
    print("🔷 三方包 Top 10（按体积）：")
    ranked = sorted(node_sizes.items(), key=lambda x: x[1], reverse=True)
    for pkg, sz in ranked[:10]:
        print(f"  {format_size(sz):>10}  {pkg}")

    # —— 3. 疑似问题提示 ——
    print("\n🔷 检查项：")
    big_js = [n for n, s in assets if n.endswith('.js') and s > 1024 * 1024]
    if big_js:
        print(f"  ⚠️  发现 {len(big_js)} 个 >1MB JS文件，建议拆分：")
        for b in big_js:
            print(f"     - {b}")
    else:
        print("  ✅  无超大JS文件 (>1MB)")

    if total_node / total_all > 0.75:
        print("  ⚠️  node_modules 占比 >75%，考虑UI库单独拆chunk或按需引入")

    if not any(n.endswith('.css') for n, _ in assets):
        print("  ℹ️  未发现独立CSS，可能未使用 MiniCssExtractPlugin")

    print(f"\n{'='*55}\n")

if __name__ == '__main__':
    if len(sys.argv) < 2:
        print("用法: python analyze_bundle.py stats.json")
        sys.exit(1)
    analyze(sys.argv[1])

# 1. 导出Webpack构建统计
npx webpack --config webpack.config.prod.js --profile --json > stats.json

# 2. 运行分析
python analyze_bundle.py stats.json

📦 Webpack Bundle 分析报告: stats.json
=======================================================

🔷 Top 20 最大产出文件：
     1.23 MB  vendor.js  ⚠️  >500KB
       345 KB  ui-lib.js
        89 KB  app.js
        ...

🔷 node_modules 总占比: 82.3% (1.67 MB / 2.03 MB)
🔷 三方包 Top 10（按体积）：
     890 KB  moment
     345 KB  ant-design-vue
      ...
🔷 检查项：
  ⚠️  发现 1 个 >1MB JS文件，建议拆分：
     - vendor.js
  ⚠️  node_modules 占比 >75%，考虑UI库单独拆chunk或按需引入

四、 优化前后典型指标对比（1688同类项目实测）

注：FCP提升主要来自分包+HTTP/2多路复用+gzip，Webpack优化贡献核心在减小首屏包体。

五、 进阶建议（1688级别）

1. CDN托管静态资源：output.publicPath = 'https://cdn.xxx.com/assets/'，释放源站带宽。

2. Preload关键Chunk：<link rel="preload" as="script" href="vendor.js">提前拉取。

3. Tree Shaking验证：确保 sideEffects: false在package.json中声明，用分析脚本确认无用代码被摇树清除。

4. 图片优化流水线：Webpack中用 image-webpack-loader压缩PNG/JPG/WEBP，1688商品图极多。

💡 总结