[{"data":1,"prerenderedAt":145},["ShallowReactive",2],{"content-/blog/webpack-optimization":3,"related-blog":120},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":114,"_id":115,"_source":116,"_file":117,"_stem":118,"_extension":119},"/blog/webpack-optimization","blog",false,"","Webpack 优化实践","代码分割、Tree Shaking、缓存策略等 Webpack 优化技巧","Webpack 优化实践, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":106},"root",[18,26,32,47,52,65,70,83,88,96,101],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Webpack 仍然在很多项目中使用，本文列出常见的性能与构建优化策略，帮助降低构建时间与产物体积。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"构建时间优化",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,42],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"使用持久化缓存（cache: { type: 'filesystem' }）和多线程构建（thread-loader/parallel-webpack）。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"减少 loader 的扫描范围，使用 include/exclude 精确匹配。",{"type":19,"tag":27,"props":48,"children":50},{"id":49},"输出体积优化",[51],{"type":24,"value":49},{"type":19,"tag":33,"props":53,"children":54},{},[55,60],{"type":19,"tag":37,"props":56,"children":57},{},[58],{"type":24,"value":59},"启用 Tree-shaking、Scope Hoisting（ModuleConcatenationPlugin）与代码分割（splitChunks）。",{"type":19,"tag":37,"props":61,"children":62},{},[63],{"type":24,"value":64},"压缩：生产环境使用 Terser/Esbuild 压缩和 CSS 压缩器（cssnano/parcel-css）。",{"type":19,"tag":27,"props":66,"children":68},{"id":67},"第三方依赖管理",[69],{"type":24,"value":67},{"type":19,"tag":33,"props":71,"children":72},{},[73,78],{"type":19,"tag":37,"props":74,"children":75},{},[76],{"type":24,"value":77},"分析 bundle（webpack-bundle-analyzer）识别大依赖，采用按需引入或替代库。",{"type":19,"tag":37,"props":79,"children":80},{},[81],{"type":24,"value":82},"使用 externals 将 CDN 或宿主环境提供的包排除在构建之外。",{"type":19,"tag":27,"props":84,"children":86},{"id":85},"开发体验",[87],{"type":24,"value":85},{"type":19,"tag":33,"props":89,"children":90},{},[91],{"type":19,"tag":37,"props":92,"children":93},{},[94],{"type":24,"value":95},"使用 HMR（热重载）与更快的替代工具（Vite/esbuild）在开发阶段替代慢的完整构建。",{"type":19,"tag":27,"props":97,"children":99},{"id":98},"结论",[100],{"type":24,"value":98},{"type":19,"tag":20,"props":102,"children":103},{},[104],{"type":24,"value":105},"通过缓存、按需加载、构建并行化与依赖管理，可以显著提升构建速度和运行时性能；同时评估是否迁移到更现代的打包工具以获得更好体验。",{"title":7,"searchDepth":107,"depth":107,"links":108},3,[109,110,111,112,113],{"id":29,"depth":107,"text":29},{"id":49,"depth":107,"text":49},{"id":67,"depth":107,"text":67},{"id":85,"depth":107,"text":85},{"id":98,"depth":107,"text":98},"markdown","content:blog:webpack-optimization.md","content","blog/webpack-optimization.md","blog/webpack-optimization","md",[121,129,137],{"_path":122,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":123,"description":124,"keywords":125,"author":11,"date":12,"category":13,"image":14,"_type":114,"_id":126,"_source":116,"_file":127,"_stem":128,"_extension":119},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":130,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":131,"description":132,"keywords":133,"author":11,"date":12,"category":13,"image":14,"_type":114,"_id":134,"_source":116,"_file":135,"_stem":136,"_extension":119},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":138,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":139,"description":140,"keywords":141,"author":11,"date":12,"category":13,"image":14,"_type":114,"_id":142,"_source":116,"_file":143,"_stem":144,"_extension":119},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945285496]