查看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
配置参数
参数 | 类型 | 描述 | 默认值 | 是否必填 |
---|---|---|---|---|
entry | Object/Array/String | 入口配置 | null | true |
open | Boolean | 是否启用DLLReferebcePlugin(默认自动识别) | true | false |
output | Object | 打包输出配置 | false | |
output.path | String | 打包后的vendor和manifest.json存放的目录 | 根目录/public/dll | false |
cacheFile | String | 将打包后的所有资源路径保存到一个文件 | /node_modules/vue-cli-plugin-dll/src | false |
用法
> 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)
- 执行: npm run dll 注意点: 1.在使用这个按需加载方式之前,需确定好项目已经按照elementUI中提示,配置babel-plugin-component 2.每一次有element.js改动,重新执行指令npm run dll,生成最新的vendor
今天的文章vue-cli3使用vue-cli-plugin-dll优化构建速度分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/17764.html