vue-cli 3 plugin for Dll and DllReference
npm install @egova/vue-cli-plugin-dll
vue -V
`
$3
` bash
vue add @egova/dll
OR
vue invoke @egova/dll
`
$3
> Simple configuration
#### you can config options of pluginOptions in vue.config.js:
`javascript
// vue.config.js
module.exports = {
pluginOptions: {
dll: {
entry: ['vue', 'vue-route']
}
}
}
`
$3
`bash
npm run dll
#OR
npx vue-cli-service dll
`
Configuration
> vue.config.js:
` javascript
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
| filename | String | chunk and manifest file name | '[name].[hash:8].dll.js' | false
more Expamle
$3
> the entry can be configured via the pluginOptions in vue.config.js
` javascript
module.exports = {
// Other options...
pluginOptions: {
dll: {
// Single entry
entry: ['vue', 'axios'],
// Multiple entry
entry: {
vendorNameOne: ['vue-route'],
vendorNameTwo: ['vue-vuex'],
}
}
}
}
`
$3
> add webpack.DllReferencePlugin
` javascript
module.exports = {
// Other options...
pluginOptions: {
dll: {
entry: ['vue'],
// only add webpack.DllReferencePlugin plugin in production model
open: process.env.NODE_ENV === 'production', //
}
}
}
`
$3
> auto inject vendor file by 'add-asset-html-webpack-plugin' plugin
` javascript
module.exports = {
// Other options...
pluginOptions: {
dll: {
entry: ['vue'],
// If you manually quote vendor file in 'index.html' file
inject: false
}
}
}
`
publish
`bash
npm publish --access public
``