Vue-cli3 uses vue-CLI-plugin-DLL to optimize the build speed

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

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

4. 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