Webpack 打包优化之重复代码提取
在前端开发中，使用 Webpack 进行打包是一种很常见的方式。虽然 Webpack 有许多功能，但是优化打包，提高性能是前端工程师必须掌握的技能之一。本文将介绍如何使用 Webpack 的重复代码提取功能，来优化打包，提高性能。
什么是重复代码？
在前端开发中，重复代码是指代码中出现了相同的文本或逻辑。例如，在一个网页中多次使用同一段代码或者同一个依赖库，都可以算作是重复代码。
重复代码的问题？
重复代码会占用额外的带宽下载时间，也会浪费内存。如果不进行优化，则会导致网页的加载速度变慢，响应速度变慢。
如何解决重复代码？
有两种解决重复代码的方法：
1.手动去除重复代码。这种方法的缺点是非常耗时、耗力，而且容易出错。同时也非常不灵活，无法应对复杂的情况。
2.自动去除重复代码。Webpack 的重复代码提取功能可以自动去除重复代码，并提高打包性能。
什么是 Webpack 的重复代码提取？
Webpack 的重复代码提取功能可以通过分析代码，自动将重复代码提取出来，并将它们放在一个单独的文件中。这样，网页加载时就只需加载一个文件，从而减小了下载时间和浪费的内存。
如何使用 Webpack 的重复代码提取？
1.安装 Webpack 和相关插件
首先，需要安装 Webpack 和相关的插件，包括：webpack，webpack-cli 和 optimize-css-assets-webpack-plugin。
npm install webpack webpack-cli optimize-css-assets-webpack-plugin --save-dev
2.配置 Webpack
接着，需要在 Webpack 的配置文件中添加以下代码，以使用重复代码提取功能：
-- -------------------- ---- -------
----- ----------------------- - ----------------------------------------------
-------------- - -
------------- -
------------ -
------- ------
----- ------
------------ -
-------- ------
-------- ------
-------- -
----- ---------
---------- --
------- ----------
--
------- -
----- ---------
----- ----------------
------- ------
-------- -----
--
--
--
---------- ---- -----------------------------
--
--3.运行 Webpack 打包
接下来，运行 Webpack 打包命令，在页面中引用生成的文件即可。
示例代码：
假设我们有两个入口文件 index.js 和 login.js，它们都需要用到一个名为 utils.js 的工具类。我们可以通过以下配置，将 utils.js 提取成一个单独的文件 common.js：
index.js：
import './style.scss';
import { hello } from './utils';
hello('index');login.js：
import { hello } from './utils';
hello('login');utils.js：
export function hello(name) {
console.log(`Hello ${name}!`);
}最终的打包结果为：
- common.js：工具类
- index.js：业务代码
- login.js：业务代码
总结：
Webpack 的重复代码提取功能是一种非常有用的优化工具。它能够自动将重复代码提取出来并放在一个单独的文件中，从而减小了下载时间和浪费的内存。我们只需要通过简单的配置即可使用，这为我们的前端开发提供了很大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646df57e968c7c53b0c93d5a