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

查看vue-cli版本

确保项目是使用vue-clli3.x.x版本。

vue -v

安装

vue add dll

简单配置

在vue.config.js配置dll

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

生成dll文件

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,
    }
  }
}

entry 配置

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

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

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

open config

增强 webpack.DllReferencePlugin插件

module.exports = {
// Other options

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

inject config

是否自动执行dll命令执行打包的vendor包自动注入到index.html中去

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

output config

打包vendor文件输出位置

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

cacheFilePath config

在了解这个配置之前，需要先了解一下vue-cli-plugin-dll的vendor文件获取机制，在获取vendor文件的时候有两种方式实现。 1.在执行 npm run dll命令时,将构建生成的所有文件的路径存储在cache.dll.json文件中,在执行注入时，获取缓存路径文件匹配所有的vendor文件。这个方式能准确获取最新一次打包生成的所有文件路径。 2.通过output配置的打包输出目录位置牧户匹配到目录中所有文件。这种方式导致匹配到多余的文件（不是dll指令生成的文件），从而导致引用混乱。

插件采用第一种方式进行注入匹配。但是：在第一种方式的实现上，由于历史遗留问题，vue-cli-plugin-dll插件默认将文件存储在vue-cli-plugin-dll的src目录下，这种情况导致两个问题 1.在线上部署机器中不存在缓存文件导致构建出现问题。 2.在升级插件包的时候缓存丢失导致构建出现问题。

清楚手动注入的文件获取及之后，为了解决此项问题，插件加入了cache.dll.json文件目录路径的配置，该配置可以将npm run dll生成的cache.dall.json存放在指定位置，从而避免以上问题

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

按需加载

由于预打包机制跟主打包机制是完全分割的，可以采用另一种方式进行模拟按需打包 1.新建一个element.js文件在项目中

// 引入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'],
      }
    }
  },
}

3.在入口文件main.js引入这个文件并注册

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

4. 执行: npm run dll

注意点： 1.在使用这个按需加载方式之前，需确定好项目已经按照elementUI中提示，配置babel-plugin-component 2.每一次有element.js改动，重新执行指令npm run dll,生成最新的vendor