webpack-DllPlugin优化打包性能（基于vue-cli）

未进行打包优化的痛点：

　　随着项目的不断扩大，引入的第三方库会越来越多，我们每次build的时候会对所有的文件进行打包，耗时必定很长，不利于日常开发。

解决思路：

　　第三方库我们只是引入到项目里来，一般不会经常性的去修改源码，一般都是在src目录下编写业务代码，因此可以把第三方依赖和src分开打包。

　　每次build的时候我们只需要把之前build好的第三方依赖文件引入到项目中即可，避免了我们每次build的时候都会build第三方依赖。

　　当第三方依赖发生改变的时候我们只需要把第三方依赖再build一次就行。

步骤一：构建项目 引入第三方依赖

## 初始化项目

vue init webpack test

cd test

npm run dev

##安装依赖模块（静态资源）

npm i element-ui -S

##在main.js引入element-ui

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

import router from './router'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: ''

})

##编译打包

npm run build

可以看见Time：15850ms，打包花费了近16秒，如果以后还要加上各种包及其他行为，打包时间难以想象。这也就是我们为什么要引入dllPlugin的原因！

步骤二：使用DllPlugin插件把第三方依赖抽离出来

##在build文件夹下创建webpack.dll.conf.js

内容如下：

'use strict'

const path = require("path");

const webpack = require("webpack");

module.exports = {

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

  entry: {

    vendor: ['vue', 'vue-router', 'element-ui']

  },

  output: {

    path: path.join(__dirname, '../static/js'),    // 打包后文件输出的位置

    filename: '[name].dll.js',

    library: '[name]_library'

// vendor.dll.js中暴露出的全局变量名。

 // 主要是给DllPlugin中的name使用，

 // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。

  },

  plugins: [

    new webpack.DllPlugin({

      path: path.join(__dirname, '../static', '[name]-manifest.json'),

      name: '[name]_library',

      context: __dirname

    })

  ]

};

##修改webpack.prod.conf.js文件

在plugins中添加

//打包优化

    new webpack.DllReferencePlugin({

      context: __dirname,

      manifest: require('../static/vendor-manifest.json')

    }),

##package.json中scripts下加入该命令"dll": "webpack --config build/webpack.dll.conf.js"

"scripts": {

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "start": "npm run dev",

    "lint": "eslint --ext .js,.vue src",

    "build": "node build/build.js",

    "dll": "webpack --config ./build/webpack.dll.conf.js"

  }

##执行下npm run dll 命令将第三方依赖进行打包

static文件下生成vendor-manifest.json文件和js/vendor.dll.js文件

##再执行npm run build打包文件

打包时间为8s,快了一倍

步骤三：进一步优化

##找到webpack.base.conf.js文件发现

resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

    }

  }

这就代表main.js中的import Vue from 'vue' 其实是引用的'vue/dist/vue.esm.js'，而webpack.dll.config.js并不知道vue指代的是'vue/dist/vue.esm.js'，所以我们需要修改webpack.dll.config.js配置：

将

entry: {

    vendor: ['vue', 'vue-router', 'element-ui']

  }

改为：

entry: {

    vendor: ['vue/dist/vue.esm.js', 'vue-router', 'element-ui']

  },

##并且在plugins中添加如下内容（压缩打包后的文件）

//压缩打包文件

    new webpack.optimize.UglifyJsPlugin({

      compress: {

        warnings: false

      }

    })

##修改webpack.base.conf.js文件，build打包时引入dll库。

cnpm i html-webpack-include-assets-plugin -S

添加

const IncludeAssetsPlugin = require('html-webpack-include-assets-plugin')

在module.exports下添加plugins

plugins:[

    new IncludeAssetsPlugin({

      assets: [`${config.build.assetsSubDirectory}/js/vendor.dll.js`],

      append: false

    }),

  ]

##由于我们修改了webpack.dll.config.js，所以我们需要重新打包：

## 重新打包npm run dll

## 重新打包源文件npm run build

不到6s

欧凯，这只是一种优化的方式，还有其他可优化的部分，后续继续添加。

赶紧去解决打包时间过长的烦恼吧。