前端优化（三）：使用dll打包抽取第三方js（DllPlugin DllReferencePlugin插件）

三、抽取第三方js，使用dll打包

第一章内容：前端优化（一）：开启nginx gzip压缩

第二章内容：前端优化（二）：使用路由懒加载

本文继续前两章内容，继续讲解第三个前端优化方案：抽取第三方js。

随着项目增长，引入的第三方js也越来越大。webpack将第三方js默认打成一个包，导致该js文件越来越庞大，严重影响首屏加载 。

1.创建抽取的文件对象

在项目根目录创建一个dll.config.js文件，配置需要抽取的第三方js，只是一个普通的js文件，可以修改成你想要的名字。

module.exports = {
   
  library: {
   
    vue: ["vue", "vue-router", "vuex"],
    others: ["axios", "js-cookie", "blueimp-md5"],
    dplayer: ["dplayer"],
    cos: ["cos-js-sdk-v5"],
    vod: ["vod-js-sdk-v6"],
    distpicker: ["v-distpicker"]
  }
};

library对象中，键为抽取后的js名称，值为一个数组，配置你项目中需要抽取的第三方js。

键越多，抽取的js文件越多。值越多，抽取的文件越大。各位根据自己项目的实际情况平衡。

2.安装clean-webpack-plugin插件

使用 clean-webpack-plugin 清除之前冗余的dll文件

npm install --save-dev clean-webpack-plugin

3.使用DllPlugin

在项目根目录创建 webpack.dll.conf.js 文件, 内容如下：

const path = require("path");
const webpack = require("webpack");
const {
    CleanWebpackPlugin } = require("clean-webpack-plugin")