webpack性能优化方式之dll--- webpack.dll.config.js
通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更(除非是版本升级)，因此Webpack 打包时，对于一些不经常更新的第三方库，比如 vue、vue-router，vuex、lodash等，希望能和业务代码分离开，Webpack社区有两种方案CommonsChunkPlugin和DLLPlugin.
对于CommonsChunkPluginwebpack每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开(此处先不做说明)。而 DLLPlugin则是能把第三方代码完全分离开，即每次只打包项目自身的代码。
DLLPlugin: DLL(Dynamic Link Library)文件为动态链接库文件，是一种最简单粗暴并且极其有效的优化方式，使用DLLPlugin，可以把构建过程分成dlI构建过程和主构建过程(实质也就是如此)。所以对于用这种方式打包的项目，需要额外新建一个配置文件，一般会有以下两个配置文件:webpack.config.js、webpack.dll.config.js
webpack.dll.configjs 简单配置: 打包需要分离到动态库的模块
const path =require('path')
const webpack=require('webpack')
var vendors = [
"@antv/g6",
"axios",
"echarts",
"vue",
"vue-router",
"vuex"
}
module.exports = {
entry: {
vendor:vendors
}，
output: {
path: path.join(__dirname, "/dist"),
filename: "Dll.js",
library: "[name]_[hash]"
}
plugins:[
new webpack.DIlPlugin({ //webpack内置的插件，不需要额外安装
path: path.join(__dirname,"/dist","manifest.json"),
//动态链接库的全局变量名称，需要和 output.library中保持一致
//该字段的值也就是输出的 manifest.json文件中 name字段的值
name: "[name]_[hash]",
context:__dirname
})
]
}
webpack.configjs: 在主构建配置文件中使用动态库文件，manifest文件给主构建流程作为查找dll的依据: DllReferencePlugin去manifestjson文件读取name值，作为从全局变量中获取动态链接库，内容时的全局变量名，因此:在webpack.dll.config.js文件中，DllPlugin 中的name 参数必须和 output.library中保持一致。
plugins:[
new webpack.DIlReferencePlugin({ // webpack内置的插件，不需要额外安装 使用了哪些动态链接库
context: __dirname
manifest: require('./dist/manifestjson')
})
]
package.json 中增加scripts 指令配置: 此命令将依赖包合并打包为一个名为dll.js的静态资源包，同时生成一个manifest.json文件方便对 dll.js 中的模块进行引用，manifest.json 给各个模块赋予 id 以便引用。
"scripts":{
"dllbuild": "webpack --mode production --config webpack.dll.config.js",
"dlldev": "webpack --mode development --config webpack.dll.config.js"
}
最后在index.html中引入: 在入口文件引入dll文件，生成的dll暴露出的是全局函数，因此还需要在入口文件里面引入对应的 dll文件。
<script src="./dist/Dll.js">/script><!--注意路径 -->
其他补充:上述用法存在一些不便之处，如在webpack.config.js中要明确指出对应的 manifest.json文件。还有当依赖升级DLL需要更新时，或者加入新的第三方库，都需要手动编译一次。
Dll Link Plugin，用于简化生成 webpack DLL的插件。基于 DIlReferencePlugin。
npm install dll-link-webpack-plugin -D
在webpackconfigjs配置文件中，用DIlLinkPlugin替换掉DIIReferencePlugin。然后运行webpack --config webpack.config.js,会自动生成DLL文件，需要更新的时候，也会自动更新
var DllLinkPlugin=require("dll-link- webpack-plugin");
module.exports={
// ...
plugins: [
new DllLinkPlugin({
config: require("webpack.dll.config.js")
})
]
};
总结DLL的作用:
1.分离代码，业务代码和第三方模块可以被打包到不同的文件里，避免打包出单个文件太大，不利于调试，
2.将单个大文件拆成多个小文件，一定情况下有利于加载(不超出浏览器一次性请求的文件数情况下，并行下载肯定比串行快)
3.提升构建速度。第三方库没有变更时，由于只构建业务代码，相比全部重新构建要快的多。
