Webpack SplitChunksPlugin 的详解
Webpack 的 SplitChunksPlugin 插件可以将代码分离成多个块，从而减少初始加载时间并且提高页面加载速度。在前端项目中，我们通常会对前后端代码和库进行分离，使得前端代码和库只为客户端提供相关的代码和库资源，同时保证前端代码和库的独立性和可维护性。
下面我们将详细解析 SplitChunksPlugin 插件的使用方法和注意事项。
使用方法
将 SplitChunksPlugin 插件添加到你的 Webpack 配置中，通常可以放在 optimization 的 splitChunks 属性中。在使用插件时，尽可能让它自动帮助我们分离代码。
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ----- -------------- ------ - ----- ----------------- ------- --------- ------------ -- ------- - --------- ------------------- ----- ----------------------- ------- -- ------------- - ------------ - ------- ----- - - --展开代码
在上面的代码中，我们将入口文件分成了两个部分，一个是应用程序的入口文件 index.js，另一个是 react 和 react-dom 库的入口文件。在 optimization 选项中，我们设置了 chunks: "all"，表示将所有的公共代码块分离出来。
运行 webpack 命令时，Webpack 会将公共代码块和应用程序代码块分别打包成两个独立的文件，这样我们就可以在需要时单独加载公共代码块，从而提高页面加载速度。
注意事项
虽然 SplitChunksPlugin 插件提供了很多优秀的功能，但是在使用时需要注意以下事项：
1. 避免重复加载
如果你同时设置了多个入口文件，那么每个入口文件可能会打包出多个包含公共组件的文件。如果这些文件每次都被加载，那么就会重复加载同样的代码。为了避免这个问题，我们需要在 Webpack 配置文件中添加如下配置：
-- -------------------- ---- ------- ------------- - ------------ - ------- ------ ------------ - -------- - ----- ------------------------- ----- ---------- ------- ----- - - - --展开代码
这会将所有 node_modules 目录下的模块打包进一个公共的 vendors 文件中，避免重复加载。
2. 懒加载
为了避免在页面加载时一次性加载过多的代码，我们可以使用懒加载的方式进行代码分离。
-- -------------------- ---- ------- ----- -------- -------------- - ----- - -------- - - - ----- --------- ----------------- -------- -- ---------- ----- ------- - ------------------------------ ----------------- - ---------------- ----------- - --- ------ -------- - ----------------------------- -- - ------------------------------------- ---展开代码
在上面的代码中，当 getComponent() 函数被执行时，Webpack 才会将 lodash 库代码打包到一个独立的文件中。这样可以在页面加载时只加载必须的资源，而不是一次性加载整个应用程序。
示例代码
下面是一个完整的 Webpack 配置文件示例，包含多个入口文件和懒加载：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ----- -------------- ------ - ----- ----------------- ---- --------------- -------- --------- ------------ -- ------- - --------- ------------------- ----- ----------------------- ------- -- ------------- - ------------ - ------- ------ ------------ - -------- - ----- ------------------------- ----- ---------- ------- ----- - - - - --展开代码
在上面的配置中，我们有三个入口文件，分别是 index.js、app.js 和 vendors，其中 vendors 文件中包含了 react 和 react-dom 库。Webpack 会将这些入口文件和相关的代码块分离出来，并在需要的时候进行加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d62fc2a941bf7134bdd244
