cli dll打包 vue_webpack进阶——DllPlugin优化打包性能（基于vue-cli）

本文主要介绍两个插件：DllPlugin和DllReferencePlugin，后者配合前者使用。

Github地址：dll-test

介绍：

打包会输出一个类dll包(dll包源于windows的动态链接库)，这些代码本身不会执行，主要是提供给我们的业务代码引用。(比如dll中有一个工具方法为时间格式化，这个方法本身并不会执行，但是当我们的业务中需要执行时间格式化时，就会引用这个方法在我们的业务中执行时间格式化)。

简言之：

将静态资源文件(运行依赖包)与源文件分开打包，先使用DllPlugin给静态资源打包，再使用DllReferencePlugin让源文件引用资源文件。

作用：

当我们一个项目引入了多个较大的包以后，这些包本身并不会运行，我们也不会修改这些包的代码，但是每当我们修改了业务代码之后，这些包也会被重新打包。极大的浪费了时间，这时我们就需要使用这个工具预先把静态资源提前打包，以后修改源文件再打包时就不会打包这些静态资源文件了。

我们以最简单的vue-cli生成的项目为例：

step 1：基础安装

## 全局安装vue-cli脚手架

npm install vue-cli -g

## 初始化项目

vue init webpack-simple dll-test

cd dll-test

## 安装基础配置包

npm install

## 安装依赖模块(静态资源)

npm install vuex vue-router axios lodash element-ui -S

目录结构：

step 2：使用依赖及打包测试

我们进入main.js，引入我们所安装的静态资源，结果为：

import Vue from 'vue'

import App from './App.vue'

import _ from 'lodash'

import vuex from 'vuex'

import ElementUI from 'element-ui'

import axios from 'axios'

import vueRouter from 'vue-router'

new Vue({

el: '#app',

render: h => h(App)

})

为了看到我们打包了哪些模块，我们进入package.json改下scripts：

"scripts": {

"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"

},

去掉build的 --hide-modules 结果为 "build": "cross-env NODE_ENV=production webpack --progress"

## 编译打包

npm run build

可以看见Time：13769ms，打包花费了近14秒，element全套以及刚才我们引入的各种包全部被打包了。

我们才引入了六个包而已，就已经花费了14秒，如果以后还要加上各种包及其他行为，打包时间难以想象。

这也就是我们为什么要引入dllPlugin的原因！

step 3：预打包依赖模块

我们知道，我们刚才所引入的vue或者vuex之类的，我们只是使用它们，并不会改变它们的源码，它们本身也不会运行，那么我们就可以把这些模块拆分出来提前打包。

那么如何提前打包它们呢？ 我们在这根目录再创建一个webpack配置文件(webpack.dll.config.js)，既然这个文件是webpack配置文件，那么它的格式肯定也和普通的webpack一样：

var path = require("path");

var webpack = require("webpack");

module.exports = {

// 你想要打包的模块的数组

entry: