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.提升构建速度。第三方库没有变更时，由于只构建业务代码，相比全部重新构建要快的多。