前端应用开发中，Webpack已经成为了必不可少的工具。它可以将众多各式各样的代码打包成一个或多个文件，以提供能够在浏览器中执行的最小化代码版本。然而，Webpack的配置可能会变得非常混乱，会对构建时间产生严重的不良影响。因此，理性配置Webpack可以大大提升前端应用的速度。
步骤1：优化代码拆分
前段应用通常包含许多小的 JavaScript 文件和库，Webpack默认情况下将所有的代码放在一个输出文件中，带来了很多不必要的性能问题。我们应该通过代码拆分策略，将大的代码块分解成小的不同文件。
Webpack 4已经默认支持了代码拆分，但是我们可以进一步进行代码拆分优化。
可以使用Webpack 提供的以下配置和插件，以实现代码拆分优化。
1）optimization.splitChunks：可以配置使用code splitting的块的最小大小，并且可以定义哪个块需要被拆分。
-- -------------------- ---- -------
------------- -
------------ -
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ----
---------
---- --- -------------
- --------------------
- --------------------------
--
-------- -
---------- --
--------- ----
------------------- -----
---------
---- --- -------------
- --------------------
- --------------------------
--
--
--
-解释：
- minSize：拆分前最小文件大小
- maxSize：拆分后最大文件大小
- minChunks：拆分前被引入的最少次数
- maxAsyncRequests：最多异步拆分请求数
- maxInitialRequests：最多同时加载的入口文件数
- name：割出块文件的名称，可以使用占位符
- cacheGroups：分割块的缓存组
2）SplitChunksPlugin：将具有许多公共依赖的代码块提取成新的块。
-- -------------------- ---- -------
-------- -
--- ------------------------------------
------- ---------- -- ------ --------- - ----- - ---------------
-------- -- -- --------
---------- -- -- -- ----- ----
----------------- -- -- -------- -- -
------------------- -- -- ----------- -
----- -- -- --- -- --------- --------
------------ --- -- ------------------------
---
--解释：
- chunks：用于选择哪些块进行优化，可选的值有 initial（初始块）、async（按需加载块）和 all（全部块）
- minSize：块的最小大小
- minChunks：被拆分的块最小被使用的次数，如果某个块的被其他块引用的次数少于这个数字，那么该块不会被提取到公共代码块中。
- maxAsyncRequests：最多是同步加载的块数
- maxInitialRequests：最多初始化加载的库数
- name：提供函数返回块的名字作为参数
- cacheGroups ：扩展splitChunks的配置，达到分离多视图，多页面的目的。
步骤2：优化Webpack Dev Server
Webpack Dev Server是一款服务于Webpack的静态服务器，主要是为浏览器提供开发服务器。
对其进行优化可以达到减少访问时间、加速打包时间，达到更快的速度。
可以使用Webpack Dev Server的以下配置和插件，以实现优化。
1）disableHostCheck：允许web应用程序从一个URL访问另一个URL，因为在生产模式下是不被允许的。
devServer: {
…
//便于在同一局域网内通过IP直接访问本机的webpack服务
host: '0.0.0.0',
disableHostCheck: true
},2）contentBase：提供给服务器的服务内容，可以是一个或多个文件夹（如静态文件）。
-- -------------------- ---- -------
---------- -
-- ----------
----- ------------
----- -----
------------ -------------------- -------
---- -----
--------- -----
--------------- ---------
------------- -
----- -----
--
------ -----
--解释：
- contentBase：提供给服务器的服务内容，可以是一个或多个文件夹。
- hot：启动热替换功能。
- compress：优化webpack打包文件时的压缩策略。
- clientLogLevel：始终将日志记录器的级别设为silent，减少console日志的数量。
- watchOptions：监听文件变化的内容，用于优化编译时间。
- quiet：打包时只在命令行打印错误和警告，不输出其他内容。
步骤3：使用MiniCssExtractPlugin插件
在Webpack 5之前，常用的替换ExtractTextPlugin的插件为MiniCssExtractPlugin，可以在打包过程中将项目中的CSS文件提取出来，减少了文件体积的同时，还可以使得文件更加可读可维护。
可以使用MiniCssExtractPlugin插件，以实现优化。
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
-------- ---------------
---- -
-
------- ----------------------------
-------- ---
--
-------------
--
--
--
--
-------- -
--- ----------------------
--------- -----------------------------
-------------- -----------
---
--解释：
- test：正则表达式，匹配需要使用加载器的文件
- exclude：排除不需要匹配的文件夹或文件
- loader：加载器，用于处理文件
- use：使用的加载器列表，从后往前执行
- css-loader：CSS加载器
- MiniCssExtractPlugin.loader：CSS提取插件
步骤4：使用DllPlugin和DllReferencePlugin
DllPlugin和DllReferencePlugin是Webpack中的两个插件，职责实现了构建缓存和提高编译速度。用来对公共库或者框架进行编译打包，提前编译打包后的文件可以通过缓存来提高构建速度，减小每次构建时的压力，对于使用率较高的第三方库，可以生成单独的编译构建，只需要编译一次即可。
可以使用DllPlugin和DllReferencePlugin插件，以实现优化。
1）在选项中配置DllPlugin插件。
-- -------------------- ---- -------
------ -
------ --------- -------------
-
-------- -
--- -------------------
-- ---------------
----- -------------------- ------------------------
----- -----------------
---
--解释：
- path：指定manifest文件的输出位置及名称
- name：设置dll的全局变量名
2）在entry文件中配置DllReferencePlugin插件。
-- -------------------- ---- -------
-------- -
--- ----------------------------
-- -------------
--------- ------------------
----------
------------------------------
---
---
--解释：
- manifest：使用DllPlugin生成的manifest文件用于找到对应的动态链接库
结论
在进行前端应用开发时，Webpack已经成为了必不可少的工具，理性配置Webpack可以大大提升前端应用的速度，提供用户的体验，切记优化速度不应该是逐字逐句的，还必须结合实际情况进行分析，综合考虑，做出最适合自己的决策。
示例代码
示例代码请参考以下仓库：Webpack-config-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6728e54a2e7021665e2204ae