webpack构建优化—dll

随着项目越来越大，项目里的依赖包也越来越多，所以打包和项目启动速度会变慢。这里介绍DllPlugin和DllReferencePlugin来进行优化，这两个插件的目的就是将不经常变更的包（比如vue，vuex和vue-router）事先打包出来引入到项目中，从而每次只需要打包真正的项目代码，提升了打包速度。

第一步：配置webpack.dll.js

首先要声明dll的配置文件webpack.dll.js，这个配置文件的作用就是将所有依赖包整合成一个文件，entry配置为venders: ["vue","vuex","axios"]，它表示会将vue，vuex和axios这些依赖包整合成一个venders.js。

用的是DllPlugin这个插件，它已经集成到webpack中，所以不用安装，它会生成两个文件，一个是包含依赖项的venders.js，还有表示依赖映射关系的manifest.json文件，它包含依赖包名以及对应存储路径，可以通过它知道venders.js里有哪些依赖包，而webpack可以通过这个文件知道哪些依赖包不参与打包。

/**
 * 利用dll技术，对包进行单独打包
 */
const { resolve } = require("path");
const webpack = require("webpack");
module.exports = {
  mode: "production",
  entry: {
    venders: ["vue","vuex","axios"]
  },
  output: {
    filename: "[name].js",
    path: resolve(__dirname, "dll"),
    library: "[name]_[hash]" //打包出来的库对外暴露出来的内容叫什么名字
  },
  plugins: [
    //打包生成一个manifest.json --> 提供映射关系
    new webpack.DllPlugin({
      name: "[name]_[hash]", //映射库的暴露的内容名称
      path: resolve(__dirname, "dll/manifest.json") //输出文件路径
    })
  ]
};

第二步：配置dll命令

在package.json里面配置dll的命令，执行npm run dll命令，会生成venders.js。

"scripts": {
  "dll": "webpack --config webpack.dll.js",
}

那venders.js是什么呢？它是根据webpack.dll.js里的entry的key值为文件名来生成的，它的值是一个数组，数组里面是打包的npm包的列表，就是把需要的包打包到venders.js中。

第三步：配置DllReferencePlugin

在webpack.config.js里配置DllReferencePlugin，这个包已经默认集成到webpack里，所以不要安装，它的作用就是根据manifest.json的依赖关系告诉哪些库不参与打包，从而提升打包的性能。

还有个AddAssetHtmlWebpackPlugin插件需要配置，这个需要执行npm i add-asset-html-webpack-plugin -D进行安装，它的作用就是将生成的venders.js插入到html中。

plugins: [
  //告诉webpack哪些库不参与打包，同时使用的名称也得变
  new webpack.DllReferencePlugin({
    manifest: path.resolve(__dirname, "dll/manifest.json")
  }),
  new AddAssetHtmlWebpackPlugin([
    {
      filepath: path.resolve(__dirname, "dll/venders.js"),
      publicPath: "./"
    }
  ])
]