View the VUe-CLI version
Make sure the project is using vuE-clli3.x. x.
vue -v
Copy the code
The installation
vue add dll
Copy the code
Simple configuration
Configure the DLL in vue.config.js
// vue config js
module.export = {
pluginOptions = {
dll: {
entry: ['vue'.'vue-router']}}}Copy the code
Generate DLL files
npm run dll
// or
npx vue-cli-service dll
Copy the code
Configuration parameters
parameter | type | describe | The default value | If required |
---|---|---|---|---|
entry | Object/Array/String | Entrance to the configuration | null | true |
open | Boolean | Whether to enable the DLLReferebcePlugin (automatic recognition by default) | true | false |
output | Object | Packaged output configuration | false | |
output.path | String | The directory where vendor and manifest.json are stored after packaging | The root directory/public/DLL | false |
cacheFile | String | Save all the packaged resource paths to a file | /node_modules/vue-cli-plugin-dll/src | false |
usage
> vue.config.js:
module.exports = {
// Other options...
pluginOptions: {
dll: {
// Entry configuration
entry: ['vue'].// Output directory
output: path.join(__dirname, './public/dll'),
// Enable DllReferencePlugin,
// By default, the plugin does not detect vendor (chunk packages generated by executing the 'NPM run DLL' directive) and will be automatically shut down.
// You can manually close the plug-in if necessary, for example:
// 1. To use the hints in the vUE code in the development environment, you can configure to enable the subcontracting mode only in the production environment, 'open: process.env.node_env === 'production''.
// 2. When the build target is' node ', you need to manually close the DLL plug-in.
open: true.// Automatically inject into index.html
// When executing other instructions such as' dev 'and' build ', the program will automatically inject files such as' *.dll. Js' generated by the 'DLL' instruction into index.html.
inject: true,}}}Copy the code
Entry configuration
module.exports = {
// Other options...
pluginOptions: {
dll: {
/ / a single entrance
entry: ['vue'.'axios']./ / entrance
entry: {
vendorNameOne: ['vue-router'].vendorNameTwo: ['vue-vuex'],}}}}Copy the code
open config
Enhance webpack DllReferencePlugin plug-ins
module.exports = {
// Other options
pluginOptions: {
dll: {
entry: ['vue'].open: process.env.NODE_ENV === 'producttion'' '}}}Copy the code
inject config
Whether to automatically execute the DLL command to automatically inject the packaged vendor package into index.html
module.exports = {
pluginOptions: {
dll: {
entry: ['vue'].// If you have already manually introduced packaged vendor in index. HTML, you can turn off auto-injection
inject: false}}}Copy the code
output config
Package the vendor file output location
module.exports = {
pluginOptions: {
dll: {
entry: ['vue'].// The customized packaged vendor file is placed in the specified folder
output: path.resolve(__dirname, './public/folder')
// orOutput: {path: path.resolve(__dirname, './public/folder')}}}}Copy the code
cacheFilePath config
Before understanding this configuration, it is necessary to understand the vendor file acquisition mechanism of VUe-cli-plugin-DLL. There are two ways to obtain vendor files. 1. When the NPM run DLL command is executed, the paths of all generated files are stored in the cache.dll.json file. During the injection, the cache path files match all vendor files. This method gets the exact path of all files generated in the last package. 2. Run the output command to match all files in the directory. This approach results in matching redundant files (not files generated by DLL instructions), resulting in chaotic references.
The plug-in takes the first approach for injection matching. However, in the implementation of the first way, due to historical problems, vuE-cli-plugin-DLL plug-in stores files in the SRC directory of VUe-cli-plugin-DLL by default. This situation leads to two problems 1. The absence of a cache file on the online deployment machine caused the build problem. 2. Build problems due to cache loss during plug-in package upgrade.
Json file directory configuration. This configuration can store the cache.dall.json file generated by NPM run DLL in the specified location
module.exports = {
pluginOptions: {
dll: {
entry: ['vue'].// The absolute path to the directory
cacheFilePath: path.resolve(__dirname, './public'' ')}}}Copy the code
According to the need to load
Since the pre-packaging mechanism is completely separate from the main packaging mechanism, there is another way to simulate on-demand packaging 1. Create a new element.js file in your project
/ / into the CSS
import 'element-ui/lib/theme-chalk/index.css'
// This is where the components need to be loaded
import {Input} from 'element-ui'
const element = {
install: function (Vue) {
Vue.component(Input.name, Input)
}
}
export default elemen
Copy the code
2. Add the configuration in vue.config.jsCopy the code
// vue.config.js
module.exports = {
// Other configuration..
pluginOptions: {
dll: {
entry: {
// The path to the new element.js file
index: ['./src/element.js'],}}},}Copy the code
3. Import this file in the entry file main.js and register
import element from './element.js'
Vue.use(element)
Copy the code
- Execute: NPM run DLL
Note: 1. Before using this on-demand loading method, make sure your project has configured babel-plugin-Component 2 as prompted in elementUI. Every time there is an element.js change, re-execute the NPM run DLL command to generate the latest vendor