最近随着前端工程化越来越被重视，webpack 作为前端开发中最火的构建工具，也更多的被使用。但是，随着项目愈发复杂， webpack 打包时间却变得越来越长，给开发带来了一定的困扰。所以，本文将介绍一些 webpack 的性能优化技巧，以便于提升打包速度。
1. 处理 JS 文件
1.1 通过 externals 引用外部 CDN 库
很多的库，如 jQuery、React 等，已经在 CDN 上被广泛地使用，我们可以通过在 webpack 的配置文件中使用 externals 属性将这些库引用到我们的项目中。
-- -------------------- ---- -------
-------------- - -
----- -------------
-- ------
---------- -
------- ---------
------ --------
------------ ----------
-
--以上代码表明，在打包过程中，webpack 将从外部引用 jQuery、React 和 ReactDOM 库，而不是打包进我们的应用中。这样做的好处是可以减小应用的打包体积，在一定程度上提高应用程序的启动速度。
1.2 开启多进程打包
在 webpack 中，我们可以通过 HappyPack 插件开启多进程打包。 HappyPack 会将我们的任务分配给多个子进程执行，加快我们应用的打包速度。
-- -------------------- ---- -------
----- --------- - ---------------------
-------------- - -
----- -------------
-- ------
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------------------
-
-
--
-------- -
--- -----------
-- ---------
--- --------
-------- --------------------------------
----------- ---------------------- ----- - --
--
-
--1.3 开启压缩代码
在生产环境下，我们需要将代码压缩以减小代码体积。webpack 自带了一个插件 UglifyJsPlugin，只需要在生产环境下启用即可。
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
----- -------------
-- ------
------------- -
---------- -
--- ----------------
------ -----
--------- ----- -- -------
---------- ----
--
-
-
--2. 处理 CSS 文件
2.1 抽离 CSS
我们可以使用 mini-css-extract-plugin 插件来抽离 CSS 文件。
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
----- -------------
-- ------
------- -
------ -
-
----- ---------
---- -
----------------------------
-------------
----------------
-
-
-
--
-------- -
--- ----------------------
--------- ----------------------
-------------- -------------------
--
-
--2.2 开启 CSS 压缩
在生产环境下，我们同样需要将 CSS 文件压缩以减小代码体积。可以使用 optimize-css-assets-webpack-plugin 插件。
-- -------------------- ---- -------
----- ----------------------- - ----------------------------------------------
-------------- - -
----- -------------
-- ------
------------- -
---------- -
--- ---------------------------
-
-
--3. 打包图片
3.1 图片压缩
我们可以使用 image-webpack-loader 对图片文件进行压缩处理。
-- -------------------- ---- -------
-------------- - -
----- -------------
-- ------
------- -
------ -
-
----- --------------------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------------------
-
--
-
------- -----------------------
-------- -
-------- ----- -- ----
-------- -
------------ -----
-------- --
--
-------- -
-------- -----
--
--------- -
-------- --------
------ -
--
--------- -
----------- -----
--
----- -
-------- --
-
-
-
-
-
-
-
--3.2 文件名哈希
在生产环境下，我们还需要考虑文件名哈希，可以使用 file-loader 来实现。
-- -------------------- ---- -------
-------------- - -
----- -------------
-- ------
------- -
------ -
-
----- --------------------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------------------
-
-
-
-
-
-
--4. 总结
以上是一些常用的 webpack 性能优化技巧，希望能对大家有所帮助。实际的项目中，可能需要根据具体情况进行调整。
完整的实例代码请见我的 GitHub 仓库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a85b948841e989476b5d4