Webpack 打包后文件过大，如何优化？

聚沙成塔·每天进步一点点

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅！！！

---

Webpack 打包后文件过大，如何优化？

在现代前端开发中，Webpack 是一个非常流行的模块打包工具，它能将 JavaScript、CSS 和其他资源文件打包成一个或多个文件，供浏览器使用。然而，在大型项目中，Webpack 打包后的文件可能会变得非常大，影响页面加载速度和用户体验。为了提高 Web 应用的性能，必须采取措施优化 Webpack 打包后的文件体积。

本文将详细介绍如何优化 Webpack 打包后文件过大的问题，包括代码分割、使用插件、减少冗余代码、优化第三方库等。

1. 代码分割（Code Splitting）

1.1 概念

代码分割是一种将代码分离成多个更小的 bundle（包）的技术，以便可以按需加载不同的代码段，而不是一次性加载所有代码。通过代码分割，页面可以更快加载，减少初始加载时间，提高性能。

1.2 Webpack 的 SplitChunksPlugin

Webpack 内置了 SplitChunksPlugin，它可以帮助自动分割代码。可以通过修改 webpack.config.js 文件，配置 optimization.splitChunks 来进行代码分割。

示例配置：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有的代码块进行分割
      minSize: 20000, // 代码块的最小尺寸，只有大于该尺寸的块才会被分割
      maxSize: 0, // 代码块的最大尺寸，默认没有限制
      minChunks: 1, // 模块被不同入口引用的次数，达到这个次数才会被分割
      maxAsyncRequests: 30, // 异步加载时最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      automaticNameDelimiter: '~', // 文件名称的连接符
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 将node_modules中的第三方库打包到vendors.js
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

通过这种配置，Webpack 可以自动将项目中的依赖项（如第三方库）和业务代码分开打包，避免将所有代码打包成一个大文件。

1.3 按需加载（Lazy Loading）

按需加载是通过在需要时动态加载某些代码块，避免初始加载时一次性加载所有内容。对于基于路由的项目，按需加载特别有用。

示例：

// React 路由按需加载
import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

这种方式使得不必要的组件在用户需要时再加载，减小了初始打包的文件体积。

2. Tree Shaking

2.1 概念

Tree Shaking 是一种通过移除未使用代码来减少打包体积的技术，它依赖于 ES6 模块的静态结构，使得 Webpack 可以识别和删除没有被使用的代码。

2.2 启用 Tree Shaking

在 Webpack 中默认开启 Tree Shaking 需要确保以下几点：

1. 使用 ES6 模块语法 (import/export)。
2. 设置 mode 为 production，因为 Tree Shaking 仅在生产环境下有效。

示例配置：

module.exports = {
  mode: 'production', // 启用生产环境模式
  // Webpack 会自动进行 Tree Shaking
};

2.3 检查未被使用的代码

你可以使用 webpack-bundle-analyzer 插件来可视化打包结果，检查哪些代码块没有被使用，并进一步优化。

安装 webpack-bundle-analyzer：

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

配置 webpack.config.js：

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(), // 启用插件
  ],
};

3. 压缩代码

3.1 JavaScript 文件压缩

Webpack 内置了 TerserPlugin 来压缩 JavaScript 代码。在生产模式下，Webpack 会自动启用这个插件。如果你希望进行更多定制，可以手动配置。

示例配置：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // 删除 console.log
        },
      },
    })],
  },
};

3.2 CSS 文件压缩

使用 css-minimizer-webpack-plugin 来压缩 CSS 文件：

安装插件：

npm install css-minimizer-webpack-plugin --save-dev

配置 webpack.config.js：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

4. 优化第三方库

4.1 使用 externals 排除第三方库

对于一些较大的第三方库（如 React、lodash 等），可以通过 externals 来避免将这些库打包到 bundle 中，而是在 HTML 中通过 <script> 标签直接引入 CDN 版本。

示例配置：

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

这样 React 和 ReactDOM 不会被打包到项目中，而是从 CDN 加载，减少了打包体积。

4.2 按需加载第三方库

如果使用诸如 lodash 等大型库，建议按需加载只需要的模块，而不是整个库。例如使用 lodash-es 替代 lodash，以获得更好的 Tree Shaking 支持。

示例：

// 错误：会引入整个lodash库
import _ from 'lodash';

// 正确：只引入需要的模块
import { debounce } from 'lodash-es';

5. 其他优化策略

5.1 使用缓存和内容哈希

通过配置 Webpack 使用文件哈希来生成带有唯一文件名的文件，确保文件更新后用户能够获得最新版本。

示例配置：

module.exports = {
  output: {
    filename: '[name].[contenthash].js', // 使用contenthash作为文件名的一部分
    path: path.resolve(__dirname, 'dist'),
  },
};

5.2 删除未使用的 CSS

使用 purgecss-webpack-plugin 可以清除打包中未使用的 CSS，从而减少文件体积。

安装插件：

npm install purgecss-webpack-plugin glob-all --save-dev

配置 webpack.config.js：

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync([
        path.join(__dirname, 'src/**/*.js'),
        path.join(__dirname, 'public/**/*.html'),
      ]),
    }),
  ],
};

5.3 延迟加载图像与懒加载

通过延迟加载图像或使用懒加载技术，可以减少初始页面加载时的网络请求，降低页面渲染时的负担。

<img src="placeholder.jpg" data-src="large-image.jpg" class="lazyload">

5.4 使用生产模式

确保在打包时启用了 Webpack 的生产模式，这会自动启用许多优化措施，如代码压缩、删除调试信息等。

设置生产模式：

module.exports = {
  mode: 'production',
};

6. 总结

优化 Webpack 打包后文件体积的策略包括：

• 代码分割：按需加载代码，减少初始文件体积。
• Tree Shaking：移除未使用的代码。
• 压缩代码：通过插件压缩 JavaScript 和 CSS 文件。
• 优化第三方库：排除不必要的第三方库，或按需引入模块。
• 使用缓存和内容哈希：提高文件缓存命中率。
• 删除未使用的 CSS：减少冗余样式文件的大小。

---

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏