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

vue-cli3使用vue-cli-plugin-dll优化构建速度确保项目是使用vue-clli3.x.x版本。 在了解这个配置之前,需要先了解一下vue-cli-plugin-dll的vendor文件获取机制,在获取vendor文件的时候有两种方式实现。 1.在执行 npm run dll命令时,将构建生成的所有文件的路径存储在cache.…

查看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)
  1. 执行: 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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注