什么是DLL文件?
DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中,许多应用程序并不是一个完整的可执行文件,它们被分割成一些相对独立的动态链接库,即DLL文件,放置于系统中。当我们执行某一个程序时,相应的DLL文件就会被调用。
为什么要在项目中使用Dll?
通常来说,我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理,每次构建时都需要把所有的代码重新构建一次,耗费大量的时间。然后大部分情况下,很多第三方库的代码并不会发生变更(除非是版本升级),这时就可以用到dll:把复用性较高的第三方模块打包到动态链接库中,在不升级这些库的情况下,动态库不需要重新打包,每次构建只重新打包业务代码。
Dllplugin的使用
使用dll时,可以把构建过程分成dll构建过程和主构建过程(实质也就是如此),所以需要两个构建配置文件,例如叫做webpack.config.js和webpack.dll.config.js。
- 使用DLLPlugin打包需要分离到动态库的模块
DllPlugin是webpack内置的插件,不需要额外安装,直接新增配置webpack.dll.config.js文件:
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: "production",
entry: {
vendors: [
'vue',
'vuex',
'vue-router',
'view-design',
'axios'
]
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, '../static/dll'),
library: '[name]',
clean: true
},
// 这个是输出映射表
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, './[name].manifest.json'),
name: '[name]',
context: __dirname // 这里的上下文要和我们后面用的DllReferencePlugin的上下文一致。
})
]
};
- 在package.json的scripts中增加:
“dll”: “npx webpack --config webpack.dll.conf.js”,
我们先来看看,这一步到底做了什么。执行:webpack --config webpack.dll.config,然后到指定的输出文件夹查看输出:
vendors.dll.js里是一个js对象,对象里面的key对应的就是下面文件里的id