webpack 打包优化 DllPlugin 简述

　　在使用webpack给前端项目进行打包时，由于需要将项目代码以及项目中引用的第三方插件共同进行打包，因此每次打包需要大量的时间来完成。但是第三方静态文件并不是经常改变并且其文件过大，因此每次都对其进行打包会浪费大量的时间。DllPlugin 能够对项目中的静态文件进行打包，能够极大的减少每次打包的时间。

1、在build文件夹中创建webpack.dll.conf.js文件，运行一下文件会生成一个vendor-manifest.json 文件，该文件在webpack.base.conf.js 中的 DllReferencePlugin 方法使用。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['echarts-wordcloud','element-ui', 'es6-promise','underscore','vue','vue-echarts-v3','vue-router','vuex','table-export','xlsx'] //需要打包的第三方静态文件
  },
  output: {
    path: path.join(__dirname, '../static/js'),// vendor.dll文件存储路径
    filename: '[name].dll.js',
    library: '[name]_library'       // vendor.dll.js中暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

2、在 webpack.base.conf.js 文件中添加 DllReferencePlugin 方法。

  plugins: [
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vendor-manifest.json')
    }),
  ]
}

注意：在 webpack.base.conf.js 文件 引入 webpage 。

3、在package.json 文件中添加配置 以便于webpack文件执行webpack打包

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:dll": "webpack --config build/webpack.dll.conf.js"
  },

4、到此为止，配置基本结束，就能够生成 dll 文件了。当然还有最后一步就是在 index.html 中引入 vendor.dll.js 文件。