4.2.1 接入 Webpack
问题一：接入Webpack？
Webpack 已经内置了对动态链接库的支持，需要通过2个内置的插件接入，它们分别是：
DllPlugin 插件：用于打包出一个个单独的动态链接库文件。
DllReferencePlugin 插件：用于在主要配置文件中去引入 DllPlugin 插件打包好的动态链接库文件。
下面以基本的 React 项目为例，为其接入 DllPlugin，在开始前先来看下最终构建出的目录结构：
├── main.js
├── polyfill.dll.js
├── polyfill.manifest.json
├── react.dll.js
└── react.manifest.json
其中包含两个动态链接库文件，分别是：
polyfill.dll.js里面包含项目所有依赖的 polyfill，例如 Promise、fetch 等 API。
react.dll.js里面包含 React 的基础运行环境，也就是 react 和 react-dom 模块。
以react.dll.js文件为例，其文件内容大致如下：
var _dll_react = (function(modules) {
// ... 此处省略 webpackBootstrap 函数代码
}([
function(module, exports, webpack_require) {
// 模块 ID 为 0 的模块对应的代码
},
function(module, exports, webpack_require) {
// 模块 ID 为 1 的模块对应的代码
},
// ... 此处省略剩下的模块对应的代码
]));
可见一个动态链接库文件中包含了大量模块的代码，这些模块存放在一个数组里，用数组的索引号作为 ID。 并且还通过_dll_react变量把自己暴露在了全局中，也就是可以通过window._dll_react可以访问到它里面包含的模块。
其中polyfill.manifest.json和react.manifest.json文件也是由 DllPlugin 生成出，用于描述动态链接库文件中包含哪些模块， 以react.manifest.json文件为例，其文件内容大致如下：
{
// 描述该动态链接库文件暴露在全局的变量名称
"name": "_dll_react",
"content": {
"./node_modules/process/browser.js": {
"id": 0,
"meta": {}
},
// ... 此处省略部分模块
"./node_modules/react-dom/lib/ReactBrowserEventEmitter.js": {
"id": 42,
"meta": {}
},
"./node_modules/react/lib/lowPriorityWarning.js": {
"id": 47,
"meta": {}
},
// ... 此处省略部分模块
"./node_modules/react-dom/lib/SyntheticTouchEvent.js": {
"id": 210,
"meta": {}
},
"./node_modules/react-dom/lib/SyntheticTransitionEvent.js": {
"id": 211,
"meta": {}
},
}
}
可见manifest.json文件清楚地描述了与其对应的dll.js文件中包含了哪些模块，以及每个模块的路径和 ID。
main.js文件是编译出来的执行入口文件，当遇到其依赖的模块在dll.js文件中时，会直接通过dll.js文件暴露出的全局变量去获取打包在dll.js文件的模块。 所以在index.html文件中需要把依赖的两个dll.js文件给加载进去，index.html内容如下：
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<script src="./dist/polyfill.dll.js"></script>
<script src="./dist/react.dll.js"></script>
<script src="./dist/main.js"></script>
</body>
</html>
以上就是所有接入 DllPlugin 后最终编译出来的代码
网友评论