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。

相关推荐
trsoliu1 天前
2025前端AI开发实战范式:RAG+私有库落地指南
前端框架·前端工程化
云枫晖1 天前
Webpack系列-Output出口
前端·webpack
白水清风2 天前
Vue3之响应式系统
vue.js·面试·前端工程化
云枫晖3 天前
Webpack系列-Entry入口
前端·webpack
one.dream3 天前
用webpack 插件实现 img 图片的懒加载
前端·webpack·node.js
云枫晖4 天前
Webpack系列-编译过程
前端·webpack
Linsk6 天前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化
颜酱6 天前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
wyzqhhhh7 天前
webpack
前端·javascript·webpack
吃饺子不吃馅8 天前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack