vue-cli-plugin-dll

Vue CLI 3 plugin for Dll and DllReference

English | 中文

:star: TODO:

• More injection mode options
• add changeLog file
• add util test

Getting started

make sure you have vue-cli 3.x.x

vue -V

Install

vue add dll 

# OR 

vue invoke dll

Quick Start

Simple configuration

you can config options of pluginOptions in vue.config.js:

// vue.config.js

 module.exports = {
    pluginOptions: {
        dll: {
            entry: ['vue', 'vue-route']
        }
    }
 }

Build Dll

npm run dll

#OR

npx vue-cli-service dll

Configuration

vue.config.js:

module.exports = {
  // Other options...

  pluginOptions: {
    dll: {
      // Enable DllReferencePlugin 
      open: true,
      // vonder entry
      entry: ''
      // chunk and manifest file dir
      output: ''
    }
  }
}

options

name	type/value-set	des	default	required
entry	Object/Array/String	vendor entry	null	true
open	true/false/'auto'	Enable DllReferencePlugin	'auto'	false
output	String	chunk and manifest file dir	'yourProjectPath/public/dll'	false
inject	Boolean	auto inject chunk	true	false

more Expamle

entry config

the entry can be configured via the pluginOptions in vue.config.js

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
           // Single entry
          entry: ['vue', 'axios'],

          // Multiple entry
          entry: {
            vendorNameOne: ['vue-route'],
            vendorNameTwo: ['vue-vuex'], 
         }
      }
   }
}

open config

add webpack.DllReferencePlugin

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
          entry: ['vue'],
          // only add webpack.DllReferencePlugin plugin in production model
          open: process.env.NODE_ENV === 'production', //         
      }
   }
}

inject config

auto inject vendor file by 'add-asset-html-webpack-plugin' plugin

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
        entry: ['vue'],
        // If you manually quote vendor file in 'index.html' file 
        inject: false
      }
   }
}