简介
Island-webpack-plugin 是一款可以帮助前端开发人员在 Webpack 中使用小包插件的插件。它可以将依赖库进行拆分，并将拆分后的依赖库打包成单独的文件，从而提高应用加载速度和减少网络传输流量。
安装
在使用 Island-webpack-plugin 之前，你需要确认你的项目已经安装了 webpack，并且 webpack 版本在 4.0 及以上。
在确认之后，您可以使用 npm 来安装 Island-webpack-plugin：
$ npm install --save-dev island-webpack-plugin
使用
配置 webpack
安装完成之后，您需要对 webpack 进行相应的配置。可以在 webpack 配置文件中引用 Island-webpack-plugin 并进行相应的配置。
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
-------------- -------------------------- -- ----- ----- ------------------------- ----
--
-------- -
--- --------------
------- - -- ---------------------------------
------ --------
------------ ------------
-
---
--
-在进行配置时，需要注意：
vendor中的键值对为需要进行拆分的包的名称和引入方式；- 如果需要进行拆分的包较多，可以在
vendor对象中继续添加需要进行拆分的包的名称及引入方式。
示例代码
假设我们需要对以下代码进行拆分，并将 react 和 react-dom 打包成单独的文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----------------
------------------
---- --
--------------------
-------------------------------
--可以通过以下的 webpack 配置文件来实现：
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
-------------- --------------------------
--
-------- -
--- --------------
------- -
------ --------
------------ ------------
-
---
--
-执行 npm run build 命令，可以得到以下输出：
dist ├── app.12345678.js ├── react.12345678.js └── react-dom.12345678.js
其中，app.12345678.js 为主要业务逻辑的打包文件，react.12345678.js 和 react-dom.12345678.js 分别为拆分后的 react 和 react-dom 打包文件。
总结
通过 Island-webpack-plugin，我们可以方便地对依赖库进行拆分，从而更好地优化我们的应用，提高应用加载速度和减少网络传输流量。在实际项目中，我们可以根据实际需要，对插件进行相应的配置和扩展，来满足我们的各种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600570bd81e8991b448e7fe9