还有哪些值得学习的应用性能极致优化技巧？

import(
  /* webpackChunkName: "heavy-component" */
  /* webpackPrefetch: true */
  "./HeavyComponent"
);

import(
  /* webpackChunkName: "critical-async" */
  /* webpackPreload: true */
  "./CriticalAsyncComponent"
);

index.js (含 runtime)
├── 引用了 async-a.js 的路径
├── async-a.js 变化 → 路径变化
└── index.js 内容变化 → hash 变化 → 缓存失效！

module.exports = {
  optimization: {
    runtimeChunk: {
      name: "runtime",
    },
  },
};

dist/
├── runtime.[hash].js      ← 运行时代码（独立）
├── main.[contenthash].js  ← 业务代码（稳定 hash）
└── vendor.[contenthash].js ← 第三方代码（稳定 hash）

// 方式1：单 runtime 文件（推荐，所有 entry 共享）
optimization: {
  runtimeChunk: { name: "runtime" },
}

// 方式2：每个 entry 各自一个 runtime
optimization: {
  runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` },
}

// 方式3：布尔值 true（等同于 'single'，所有 entry 共享一个 runtime chunk）
optimization: {
  runtimeChunk: true,
}

// webpack.config.js
module.exports = {
  mode: "production",  // 条件1：启用优化（或手动设置 minimize: true）
  optimization: {
    usedExports: true, // 条件2：标记未使用的导出
  },
};

// utils.js
export const usedFunc = () => "I am used";
export const unusedFunc = () => "I will be shaken off";

// main.js
import { usedFunc } from "./utils";
console.log(usedFunc());

{
  "name": "my-lib",
  "sideEffects": false,
  // 或精确指定有副作用的文件
  "sideEffects": ["*.css", "./src/special.js"]
}

{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js"
  ]
}

// lodash (CommonJS)
module.exports = {
  map: function() { /* ... */ },
  filter: function() { /* ... */ },
  // 几百个工具函数...
};

// 你的代码 (v5.106+ 之前：整个 lodash被打包)
const { map } = require("lodash");

// v5.106+ 之后：只有 map 相关代码被打包！
const { map } = require("lodash");

// 打包前
// common.js
export default "common";

// index.js
import common from "./common";
console.log(common);

// 默认打包结果（每个模块一个闭包）
"./src/common.js":
  ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    const __WEBPACK_DEFAULT_EXPORT__ = ("common");
    __webpack_require__.d(__webpack_exports__, {
      "default": () => (__WEBPACK_DEFAULT_EXPORT__)
    });
  }),
"./src/index.js":
  ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    var _common__WEBPACK_IMPORTED_MODULE_0__ =
      __webpack_require__(/*! ./common */ "./src/common.js");
    console.log(_common__WEBPACK_IMPORTED_MODULE_0__)
  })

// Scope Hoisting 后的结果
((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  ;// CONCATENATED MODULE: ./src/common.js
  const common = ("common");
  
  ;// CONCATENATED MODULE: ./src/index.js
  console.log(common);
})

// 方式1：production 模式自动开启
module.exports = { mode: "production" };

// 方式2：显式配置
module.exports = {
  optimization: {
    concatenateModules: true,
    usedExports: true,
  },
};

// 方式3：直接使用插件
const ModuleConcatenationPlugin = require("webpack/lib/optimize/ModuleConcatenationPlugin");
module.exports = {
  plugins: [new ModuleConcatenationPlugin()],
};

module.exports = {
  resolve: {
    mainFields: ["browser", "module", "jsnext:main", "main"],
  },
};

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      // 遇到 $ 时自动从 jquery 加载
      $: "jquery",
      jQuery: "jquery",
      // 遇到 _ 时自动从 lodash 加载
      _: "lodash",
    }),
  ],
};

// 无需 import，直接使用
$("#app").text("Hello");
console.log(_.map([1, 2, 3], x => x * 2));

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("some-old-library"),
        use: "imports-loader?this=>window",
      },
    ],
  },
};

new webpack.BannerPlugin("Banner text at top of file"),

// Vue Router
const routes = [
  {
    path: "/dashboard",
    component: () =>
      import(/* webpackChunkName: "dashboard" */ "./views/Dashboard.vue"),
  },
  {
    path: "/settings",
    component: () =>
      import(/* webpackChunkName: "settings" */ "./views/Settings.vue"),
  },
];

// React Router
const Dashboard = React.lazy(() =>
  import(/* webpackChunkName: "dashboard" */ "./pages/Dashboard")
);

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

class HeavyModal extends React.Component {
  state = { ModalComponent: null };

  handleClick = async () => {
    const { default: Modal } = await import(
      /* webpackChunkName: "heavy-modal" */ "./HeavyModalContent"
    );
    this.setState({ ModalComponent: Modal });
  };

  render() {
    const { ModalComponent } = this.state;
    return (
      <>
        <button onClick={this.handleClick}>打开重型弹窗</button>
        {ModalComponent && <ModalComponent />}
      </>
    );
  }
}

async function loadFeature() {
  if (user.isAdmin) {
    const adminModule = await import(
      /* webpackChunkName: "admin-features" */ "./admin"
    );
    return adminModule;
  }
  const userModule = await import(
    /* webpackChunkName: "user-features" */ "./user"
  );
  return userModule;
}

// 相同 name 的 import() 会被合并
import(/* webpackChunkName: "sub-pages" */ "./Foo.vue");
import(/* webpackChunkName: "sub-pages" */ "./Bar.vue");
import(/* webpackChunkName: "sub-pages" */ "./Baz.vue");

// 结果：生成 sub-pages.js 一个文件，包含三个组件

// 基础用法
const module = await import("./module");
module.default(); // 默认导出
module.namedExport(); // 命名导出

// Promise 用法
import("./module").then((module) => {
  module.doSomething();
});

// 普通 import() — 异步，返回 Promise
const mod = await import("./heavy"); // 需要等待加载完成

// import defer — 同步语法，延迟求值（对应 TC39 deferred module evaluation 提案）
import defer * as counter from "./counter";
// ↑ 同步执行，立即获得模块命名空间的代理对象
// ↑ 模块实际代码在首次访问属性（如 counter.increment()）时才执行

module.exports = {
  experiments: {
    deferImport: true,  // 启用 import.defer() 支持
  },
};

module.exports = {
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
    lodash: "_",
  },
  output: {
    publicPath: "https://cdn.example.com/assets/",
  },
};

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>

module.exports = {
  output: {
    publicPath: "auto",  // 根据 script 标签 src 或 document.currentScript 自动推断
  },
};

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "gzip",
      threshold: 10240,      // >10KB 才压缩
      minRatio: 0.8,         // 压缩率 < 80% 才保留
      test: /\.(js|css|html|svg)$/,
    }),
  ],
};

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "brotliCompress",
      filename: "[path][base].br[query]",
      threshold: 10240,
      minRatio: 0.8,
      compressionOptions: { level: 11 },  // brotli 最高级别
    }),
  ],
};

http {
    # gzip 静态文件
    gzip_static on;

    # brotli 静态文件（需安装 ngx_brotli 模块）
    brotli_static on;

    # 回退到实时压缩
    gzip on;
    gzip_types text/plain application/javascript text/css;
}

const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob-all");
const path = require("path");

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync([
        path.join(__dirname, "src/**/*.js"),
        path.join(__dirname, "src/**/*.jsx"),
        path.join(__dirname, "src/**/*.vue"),
        path.join(__dirname, "src/**/*.html"),
        // 如果使用 Tailwind CSS，还需要扫描配置文件
        path.join(__dirname, "tailwind.config.js"),
      ]),
      safelist: {
        // 保护不能被移除的动态类名
        standard: [/^alert-/, /^is-/],
        deep: [/^modal-/],
        greedy: [/^slider/],
      },
    }),
  ],
};

// postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("@fullhuman/postcss-purgecss")({
      content: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.vue"],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
  ],
};

const webpack = require("webpack");

module.exports = {
  plugins: [
    // 忽略 moment.js 的所有 locale 文件
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
  ],
};

import moment from "moment";
import "moment/locale/zh-cn";  // 只引入中文

moment.locale("zh-cn");

// 即使只用了一个函数
import _ from "lodash";  // 整个 lodash (~70KB gzipped ~24KB) 都被打包
_.map([1, 2, 3], x => x * 2);

npm install lodash-es

// 只打包 map 函数及其依赖 (~几 hundred bytes)
import { map } from "lodash-es";
map([1, 2, 3], x => x * 2);

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: "asset/resource", // Webpack 5 内置 Asset Modules，替代 file-loader
        generator: {
          filename: "images/[name].[hash][ext]",
        },
      },
    ],
  },
};

// webpack.config.js（接上例）
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: "asset/resource",
        generator: { filename: "images/[name].[hash][ext]" },
        use: [
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: { progressive: true, quality: 75 },
              optipng: { enabled: false },
              pngquant: { quality: [0.65, 0.9], speed: 4 },
              webp: { quality: 75 },
            },
          },
        ],
      },
    ],
  },
};

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="fallback" />
</picture>

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.ProgressPlugin({
      profile: false,       // 是否收集性能剖析数据
      entries: true,        // 显示 entry 计数
      modules: true,        // 显示 module 计数
      modulesCount: 5000,   // 最少 modules 数才显示
      dependencies: true,   // 显示 dependency 计数
      dependenciesCount: 10000, // 最少 dependencies 数才显示
      percentBy: "entries", // 进度计算依据: 'entries' | 'modules'
    }),
  ],
};

0% building
10% building 1/1 entries
50% building 2/ modules (3/5)
80% building 5/ modules (12/15)
95% emitting
98% after emitting
100%

npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "static",  // 生成 HTML 报告
      openAnalyzer: false,     // 不自动打开浏览器
    }),
  ],
};

module.exports = {
  devServer: {
    client: {
      overlay: {
        errors: true,   // 显示编译错误
        warnings: false, // 是否显示警告
      },
    },
  },
};

module.exports = (env, argv) => {
  const isDev = argv.mode === "development";

  return {
    devtool: isDev
      ? "eval-cheap-module-source-map"  // 开发：快速重建 + loader 映射
      : "source-map",                    // 生产：完整映射（上传到错误监控服务）
  };
};

// 生产环境：生成 sourcemap 但不上传到 CDN
const isProd = process.env.NODE_ENV === "production";

module.exports = {
  devtool: isProd ? "hidden-source-map" : "eval-cheap-module-source-map",
  // hidden-source-map 生成 .map 文件但不被引用
  // 可单独上传到 Sentry/Rollbar 等错误监控平台
};

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  output: {
    filename: "[name].[contenthash:8].js",   // 8位 hash 足够防碰撞
    path: path.resolve(__dirname, "dist"),
  },
  optimization: {
    runtimeChunk: "single",  // 提取 runtime，避免连带更新
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:8].css",
    }),
  ],
};

dist/
├── runtime.a1b2c3d4.js        ← runtime（极少变化，可长缓存）
├── main.e5f6g7h8.js           ← 入口代码
├── vendor.i9j0k1l2.js         ← 第三方库（稳定）
├── styles.m3n4o5p6.css        ← 样式文件
└── sub-page.q7r8s9t0.js       ← 异步 chunk

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

module.exports = {
  performance: {
    maxAssetSize: 172 * 1024,       // 单个文件上限 172KB
    maxEntrypointSize: 244 * 1024,  // 入口总大小上限 244KB
    hints: "error",                 // 'warning' | 'error' | false
    assetFilter: (assetFilename) => {
      return assetFilename.endsWith(".js");  // 只监控 JS
    },
  },
};