©2020-2024 ioDraw All rights reserved
<>DLL plugin打包步骤
.dll为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据
把基础模块独立打包出来放到单独的动态链接库里
当需要导入的模块在动态链接库的时候，模块不能再次打包，而且从动态链接库里面获取
DllPlugin插件：用于打包一个个动态链接库
DllReferencePlugin:在配置文件中引入DllPlugin插件打包好的动态链接库
1、定义配置文件和命令
"build:dll": "webpack --config build/webpack.dll.config.js --mode=development"
webpack.dll.config.js配置处理
/* * @description: * @author: steve.deng * @Date: 2020-09-25 12:53:31 *
@LastEditors: steve.deng * @LastEditTime: 2020-09-25 13:24:27 */ const path =
require("path"); // const DllPlugin = require("webpack/lib/DllPlugin"); const
webpack= require('webpack') const ParallelUglifyPlugin = require(
'webpack-parallel-uglify-plugin') module.exports = { entry: { vendor: [
'vue/dist/vue.esm.js', 'element-ui/lib/element-ui.common.js', 'wangeditor',
'mathjs', 'echarts', 'html2canvas', 'vue-router', 'vuex'] }, output: { path:
path.resolve(__dirname, "../static/js"), filename: "[name].dll.js",
//vendor.dll.js library: "_dll_[name]_library",//库的名字叫 _dll_[name]_library 决定了
vendor.dll.js里面库的名字 // vendor.dll.js中暴露出的全局变量名。 // 主要是给DllPlugin中的name使用， //
故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。 }, plugins: [ new
webpack.DllPlugin({ // context: path.join(__dirname, '../'), name:
"_dll_[name]_library", // 决定了.manifest里面的name名字 和 上面library对应 path: path.join(
__dirname, '../static/js', '[name]-manifest.json'), }), // new
ParallelUglifyPlugin({ // cacheDir: '.cache/', // uglifyJS: { // output: { //
comments: false // }, // compress: { // warnings: false // } // } // }) ], };
// 一般放在生产配置就好了 开发环境建议不要用 比如vue库的一些错误提示会打包成时被省略了 ，会开发环境不友好 ，
webpack.prod.conf.js
plugins: [ // 引用插件 new webpack.DllReferencePlugin({ // 这里的上下文要与dllplugin保持一致
// context: path.join(__dirname, '../'), manifest: require(
'../static/js/vendor-manifest.json') }) ]
html引入打包好的包
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <
link rel="shortcut icon" href="static/images/favicon.ico"> </head> <body> <div
id="app"></div> <!-- built files will be auto injected --> <script> </script> <
script type="text/javascript" src="/static/js/vendor.dll.js"></script> </body> <
/html>
原理
xx.manifest.json
name指的是对应的dll库名字
描述了哪些模块被打进来dll了， 用模块名当id标识出来 大概是一个模块清单
xxx.dll.js 就是模块的源码了
xxx.dll.js 是各个模块的源码集合 通过key（模块id）–> value查询出来
上面文件 其实就是一个 全局变量 var _dll_react = xxxx；
那么webpack如何查找打包好的模块呢？而不需要重复打包
1、比如index.js引入了 react
import React from 'react'; //./node_modules/_react@16.13.1@react/index.js
console.log(React);
2、他会去mainfest.json找模块id 其实就是react关键字拼接版本号 + index.js组成id去寻找模块
即 ‘./node_modules/’+’_react@16.13.1@react’+ ‘/index.js’ 组成的id
3、找到有模块的话，就不再去打包了
打包出来的bundle.js直接会引入上面打包好的dll库，dll库会暴露一个全局变量_dll_react
* bundle.js里面 会有一个定义好的key “dll-reference _dll_react” 对应
打包出来的全局变量，对应是全部的打包出来的第三方模块 /***/ (function(module, __webpack_exports__,
__webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ =
__webpack_require__(/*! react */ "./node_modules/_react@16.13.1@react/index.js")
; /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default =
/*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); console.
log(react__WEBPACK_IMPORTED_MODULE_0___default.a); /***/ }), /***/
"dll-reference _dll_react": /*!*****************************!*\ !*** external
"_dll_react" ***! \*****************************/ /*! no static exports found */
/***/ (function(module, exports) { module.exports = _dll_react; /***/ })
/******/ });
* index.js实际引入了react
bundle.js里面就有
“./src/index.js”: webpack_require(/*! react */
“./node_modules/_react@16.13.1@react/index.js”); /***/ "./src/index.js":
/*!**********************!*\ !*** ./src/index.js ***! \**********************/
/*! no exports provided */ /***/ (function(module, __webpack_exports__,
__webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ =
__webpack_require__(/*! react */ "./node_modules/_react@16.13.1@react/index.js")
; /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default =
/*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); console.
log(react__WEBPACK_IMPORTED_MODULE_0___default.a); /***/ }),
* 而 webpack_require(/*! react */
“./node_modules/_react@16.13.1@react/index.js”); 其实就是指向刚才的全局变量
“./node_modules/_react@16.13.1@react/index.js"就是"dll-reference
_dll_react"里面的某个key读取
所以可以通过(webpack_require(/*! dll-reference _dll_react */ “dll-reference
_dll_react”))(”./node_modules/_react@16.13.1@react/index.js")就能读取了react代码了
/***/ "./node_modules/_react@16.13.1@react/index.js":
/*!********************************************************************************************!*\
!*** delegated ./node_modules/_react@16.13.1@react/index.js from dll-reference
_dll_react ***!
\********************************************************************************************/
/*! no static exports found */ /***/ (function(module, exports,
__webpack_require__) { module.exports = (__webpack_require__(/*! dll-reference
_dll_react */ "dll-reference _dll_react"))(
"./node_modules/_react@16.13.1@react/index.js"); /***/ }),
大致就是这个流程了