提高webpack构建速度之DllPlugin与DllRefer

模块化打包工具webpack以其“黑魔法”构建的方法深受前端er喜爱，但面对慢如龟毛的编译速度，怎么能忍。本文旨在通过介绍DllPlugin与DllReferencePlugin的使用方法，加速webpack的编译过程。同时，生成的依赖库也能解决缓存问题，为页面又加快几秒（逃

1. DllPlugin
   先来看官方介绍

This plugin is used in a separate webpack config exclusively to create a dll-only-bundle. It creates a manifest.json
file, which is used by the DllReferencePlugin
to map dependencies.

总结就是为了分散 bundle 包，加快编译过程而生的。通过创建一个名为mainfest.json的依赖文件，指明依赖项目，为后面构建的bundle包作导引。为此，我们创建一个名为webpack.config.dll.js的配置文件：

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')

process.noDeprecation = true
  // 入口
var entry = {
  // 把有需要打包的常用库封装，如babel-polyfill,jquery等
  vendor: ['babel-polyfill', 'vue/dist/vue.runtime.min', 'jquery/dist/jquery.slim.min']
}

var config = {
  entry: entry,
  output: {
    path: path.resolve(__dirname, '../dist/static/js'),
    filename: '[name].js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist'], {
      root: path.resolve(__dirname, '..')
    }),
    // 划重点！！
    new webpack.DllPlugin({
    // 指定路径
      path: path.join(__dirname, '../dist', '[name]-manifest.json'),
    // 指定依赖库的名称
      name: '[name]_library'
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      output: false,
      compress: {
        unused: true,
        dead_code: true,
        pure_getters: true,
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        comparisons: true,
        sequences: true,
        evaluate: true,
        join_vars: true,
        if_return: true
      },
      comments: false,
      minimize: true
    })
  ]
}

module.exports = config

执行webpack --config webpack.config.dll.js得到打包后的文件

image.png

之后，在webpack生产配置文件中添加

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
// webpack plugins
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

var config = {
  ..
  entry 
  ...
  output
  ...
  rules
  ...
  plugins: [
    // 划重点
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('../dist/vendor-manifest.json')
    }),
    ...
    htmlwebpacks
   ...
  // 在htmlwebpack后插入一个AddAssetHtmlPlugin插件，用于将vendor插入打包后的页面
    new AddAssetHtmlPlugin({ filepath: require.resolve('../dist/static/js/vendor.js'), includeSourcemap: false })
  ]
}

module.exports = config

至此，搞定！！

---

END