在开发中，使用Webpack打包是前端开发中非常常见的操作。但是有时在完成打包之后，页面出现了闪烁的情况。这种情况可能导致用户体验异常，影响网站的正常使用。在本篇文章中，我们将探讨Webpack打包后页面闪烁的解决方法。
问题原因
在使用Webpack打包后，页面出现闪烁的原因可能是Webpack打包后生成的文件中，存在多个entry时， webpack在处理公共模块时，会将公共模块打包到单独的文件中，并使用异步加载（异步请求），这样可能导致一些组件或者模块未加载完成时，页面进行了渲染，从而导致页面的闪烁。
解决方案
解决Webpack打包后页面闪烁的方法有很多，我们在这里推荐使用split-chunk插件。
split-chunk插件，可以将公共的代码提取出来，生成一个单独的文件，而不是生成多个异步请求的文件。
在webpack.config.js中增加以下配置
-- -------------------- ---- -------
------------- -
------------ -
------- ------
----- -----
-------- ------
------------ -
-------- -
---------- --
--------- ----
------------------- -----
--
-------- -
----- -------------------------
--------- ---
-
-
-
-其中，optimization对应的是webpack的优化配置，splitChunks的配置主要有：
- chunks：表示哪些块要被分离出来。all 表示支持同步和异步引入。async 表示只支持异步代码块引入。initial 表示只支持同步代码块引入。
- minSize：表示分离出来的代码块最小的大小，如果代码块小于 minSize，那么不会被分离代码块。默认值30000。
- cacheGroups：表示将公共模块提取出来的规则，vendors表示将所有/node_modules/文件夹下的模块单独打包到一个文件中，default表示通用模块打包进同一个文件中。
示例代码
下面是一个使用Webpack打包后出现页面闪烁的代码片段：
-- -------------------- ---- ------- -- -------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ -------------- ------ - ------ - ---- ------- ---------------- ------- -------------------- --------------- ------------------------------- --
在该代码片段中，使用了antd库的组件，我们需要将其和其他公共组件打包到一个文件中。
我们可以在webpack.config.js中添加以下配置：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- ------
----- -----
---------- --
------------ -
-------- -
---------- --
--------- ----
------------------- -----
--
-------- -
----- -------------------------
--------- ---
-
-
-
-
-这样，Webpack将会把所有的公共代码打包到一个文件中，避免了页面出现闪烁的问题。
总结
本篇文章主要介绍了Webpack打包后页面闪烁的解决方法，推荐使用split-chunk插件将公共代码打包到同一个文件中，避免异步请求导致页面闪烁的问题。最后，希望读者能够以此为基础，深入学习Webpack的相关知识，加深对前端打包的理解和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461df09968c7c53b0335369