模塊化打包工具webpack以其“黑魔法”構(gòu)建的方法深受前端er喜愛(ài)，但面對(duì)慢如龜毛的編譯速度，怎么能忍。本文旨在通過(guò)介紹DllPlugin與DllReferencePlugin的使用方法，加速webpack的編譯過(guò)程。同時(shí)，生成的依賴庫(kù)也能解決緩存問(wèn)題，為頁(yè)面又加快幾秒（逃

1. DllPlugin
   先來(lái)看官方介紹

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.

總結(jié)就是為了分散 bundle 包，加快編譯過(guò)程而生的。通過(guò)創(chuàng)建一個(gè)名為mainfest.json的依賴文件，指明依賴項(xiàng)目，為后面構(gòu)建的bundle包作導(dǎo)引。為此，我們創(chuàng)建一個(gè)名為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 = {
  // 把有需要打包的常用庫(kù)封裝，如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, '..')
    }),
    // 劃重點(diǎn)??！
    new webpack.DllPlugin({
    // 指定路徑
      path: path.join(__dirname, '../dist', '[name]-manifest.json'),
    // 指定依賴庫(kù)的名稱
      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

執(zhí)行webpack --config webpack.config.dll.js得到打包后的文件

image.png

之后，在webpack生產(chǎn)配置文件中添加

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: [
    // 劃重點(diǎn)
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('../dist/vendor-manifest.json')
    }),
    ...
    htmlwebpacks
   ...
  // 在htmlwebpack后插入一個(gè)AddAssetHtmlPlugin插件，用于將vendor插入打包后的頁(yè)面
    new AddAssetHtmlPlugin({ filepath: require.resolve('../dist/static/js/vendor.js'), includeSourcemap: false })
  ]
}

module.exports = config

至此，搞定??！

END