webpack打包优化

Webpack 的优化点很多,可以分成 构建速度优化打包体积优化 两大类。下面给你整理一份比较系统的清单:


🔹 一、构建速度优化

减少打包时间,让开发体验更流畅。

  1. 合理使用 mode

    • 开发环境:mode: "development",默认不开启压缩,构建快。
    • 生产环境:mode: "production",自动启用压缩、tree-shaking 等。
  2. 开启缓存

    • 持久化缓存(Webpack 5 内置):

      css 复制代码
      cache: {
        type: "filesystem"
      }

      会把模块和构建结果缓存到硬盘,下次构建直接复用。

  3. 多进程/多线程

    • 使用 thread-loaderparallel-webpack

      css 复制代码
      {
        loader: "thread-loader",
        options: { workers: 2 }
      }
  4. 缩小构建范围

    • 配置 include / exclude,减少 babel-loader 等 loader 的处理范围。
    • 合理使用 resolve.modulesresolve.alias,避免层层查找。
  5. DLL / externals

    • 较老的方法:DllPlugin 提前打包不常改动的库。
    • 或者 externals 把第三方库(React、Vue)交给 CDN,不参与打包。
  6. 增量构建

    • 使用 webpack-dev-serverHMR(热更新) ,只重新编译改动部分。

🔹 二、打包体积优化

减少产物大小,提升加载速度。

  1. Tree-Shaking

    • Webpack 2+ 内置,前提是:

      • 使用 ES Module (import/export)。
      • sideEffects: false 或者指定有副作用的文件。
    • 配合 TerserPlugin 去除无用代码。

  2. 代码分割(Code Splitting)

    • 使用 optimization.splitChunks 拆分公共依赖。
    • 动态 import(),实现按需加载。
  3. 压缩与优化

    • JS 压缩:默认 TerserPlugin
    • CSS 压缩:css-minimizer-webpack-plugin
    • 图片压缩:image-minimizer-webpack-plugin(或构建时用 tinypng)。
  4. 减少 polyfill 体积

    • 按需引入 polyfill:core-js + @babel/preset-env + useBuiltIns: "usage"
  5. Scope Hoisting(作用域提升)

    • optimization.concatenateModules: true,减少函数包装。
  6. 使用更小的依赖

    • Lodash → lodash-es + babel-plugin-lodash
    • Moment.js → dayjs
    • antd → 按需加载 babel-plugin-import
  7. 懒加载资源

    • 路由级代码分割。
    • 大图、视频采用延迟加载(react-lazyloadloading="lazy")。

🔹 三、生产部署优化

  1. 开启 Gzip 或 Brotli

    • 使用 compression-webpack-plugin 生成 .gz / .br 文件,配合 Nginx。
  2. CDN 加速

    • 静态资源放到 CDN,减少服务器压力。
  3. 长缓存优化

    • output.filename: '[name].[contenthash].js'
    • 确保修改后才更新 hash,未修改的文件可走浏览器缓存。
  4. Preload / Prefetch

    • 提前加载关键资源:

      ini 复制代码
      <link rel="preload" as="script" href="main.js" />
      <link rel="prefetch" href="chunk-vendors.js" />

👉 总结:

  • 开发阶段:缓存、HMR、多进程、缩小 loader 范围。
  • 生产阶段:Tree-shaking、代码分割、压缩优化、缓存策略、CDN。

相关推荐
富贵2号11 小时前
从零开始理解 Webpack:构建现代前端工程的基石
webpack
Hashan3 天前
告别混乱开发!多页面前端工程化完整方案(Webpack 配置 + 热更新)
webpack
开心不就得了3 天前
构建工具webpack
前端·webpack·rust
鲸落落丶4 天前
webpack学习
前端·学习·webpack
闲蛋小超人笑嘻嘻4 天前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
guslegend4 天前
Webpack5 第五节
webpack
RJiazhen6 天前
从迁移至 Rsbuild 说起,前端为什么要工程化
前端·架构·前端工程化
海涛高软6 天前
qt使用opencv的imread读取图像为空
qt·opencv·webpack
行者..................6 天前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
千叶寻-6 天前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json