vue-cli3使用vue-cli-plugin-dll优化构建速度

vue -v

vue add dll

// vue config js
module.export = {
	pluginOptions = {
		dll: {
			entry: ['vue','vue-router']
		}
	}
}

npm run dll 
// or 
npx vue-cli-service dll

> vue.config.js:
module.exports = {
  // Other options...

  pluginOptions: {
     dll: {
      // 入口配置
      entry: ['vue'],
      // 输出目录
      output: path.join(__dirname, './public/dll'),

      // 是否开启 DllReferencePlugin,
      // 默认情况下，插件没有检测到 vendor (执行 `npm run dll` 指令生成的 chunk 包)，会自动关闭。
      // 在有需要的情况下可以手动关闭插件，例如：
      // 1. 为了在开发环境使用vue代码中的提示，可配置只在生产环境开启分包模式，`open : process.env.NODE_ENV === 'production'`。
      // 2. 在构建目标(`target`)为 `node`，需要手动关闭 dll 插件。
      open: true,

      // 自动注入到 index.html
      // 在执行 `dev` , `build` 等其他指令时，程序会自动将 `dll` 指令生成的 `*.dll.js` 等文件自动注入到 index.html 中。
      inject: true,
    }
  }
}

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

  pluginOptions: {
      dll: {
           // 单入口
          entry: ['vue', 'axios'],

          // 多入口
          entry: {
            vendorNameOne: ['vue-router'],
            vendorNameTwo: ['vue-vuex'],
         }
      }
   }
}

module.exports = {
// Other options

	pluginOptions: {
		dll: {
			entry: ['vue'],
			open: process.env.NODE_ENV === 'producttion'''
		}
	}
}

module.exports = {
	pluginOptions: {
		dll: {
			entry: ['vue'],
			// 如果已经手动在index.html中引入了打包后的vendor，可以关闭自动注入   
			inject: false
		}
	}
}

module.exports = {
	pluginOptions: {
	 dll: {
	 	entry: ['vue'],
	 	// 自定义打包完的vendor文件放在指定的文职
	 	output: path.resolve(__dirname, './public/folder')
	 	// or
	 	output： {
	 	  path: path.resolve(__dirname, './public/folder')
	 	}
	 }
	}
}

module.exports = {
	pluginOptions: {
		dll: {
			entry: ['vue'],
			// 目录的绝对路径
			cacheFilePath: path.resolve(__dirname, './public''')
		}
	}
}

// 引入css
import 'element-ui/lib/theme-chalk/index.css'
// 需要在这里加载需要用到的组件
import  {Input} from 'element-ui'

const element = {
  install: function (Vue) {
    Vue.component(Input.name, Input)
  }
}
export default elemen

2.在vue.config.js中加上配置

// vue.config.js
module.exports = {
  // 其他配置..

  pluginOptions: {
    dll: {
      entry: {
        // 新加的element.js文件路径
        index: ['./src/element.js'],
      }
    }
  },
}

import element from './element.js'
Vue.use(element)