技术标签： cli dll打包 vue
vue 开发过程中，保存一次就会编译一次，如果能够减少编译的时间，哪怕是一丁点，也能节省不少时间。开发过程中个人编写的源文件才会频繁变动，而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来，就能减少打包体积，加快编译速度。本文主要讲述在 vue-cli3 中利用 dllplugin 来进行预编译。
1、安装相关插件
yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev
2、编写配置文件
在项目根目录下新建 webpack.dll.conf.js，输入以下内容。
const path = require('path')
const webpack = require('webpack')
const cleanwebpackplugin = require('clean-webpack-plugin')
// dll文件存放的目录
const dllpath = 'public/vendor'
module.exports = {
entry: {
// 需要提取的库文件
vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
},
output: {
path: path.join(__dirname, dllpath),
filename: '[name].dll.js',
// vendor.dll.js中暴露出的全局变量名
// 保持与 webpack.dllplugin 中名称一致
library: '[name]_[hash]'
},
plugins: [
// 清除之前的dll文件
new cleanwebpackplugin(['*.*'], {
root: path.join(__dirname, dllpath)
}),
// 设置环境变量
new webpack.defineplugin({
'process.env': {
node_env: 'production'
}
}),
// manifest.json 描述动态链接库包含了哪些内容
new webpack.dllplugin({
path: path.join(__dirname, dllpath, '[name]-manifest.json'),
// 保持与 output.library 中名称一致
name: '[name]_[hash]',
context: process.cwd()
})
]
}
3、生成 dll
在 package.json 中加入如下命令
"scripts": {
...
"dll": "webpack -p --progress --config ./webpack.dll.conf.js"
},
控制台运行
yarn run dll
4、忽略已编译文件
为了节约编译的时间，这时间我们需要告诉 webpack 公共库文件已经编译好了，减少 webpack 对公共库的编译时间。在项目根目录下找到 vue.config.js ( 没有则新建 )，配置如下:
const webpack = require('webpack')
module.exports = {
...
configurewebpack: {
plugins: [
new webpack.dllreferenceplugin({
context: process.cwd(),
manifest: require('./public/vendor/vendor-manifest.json')
})
]
}
}
5、index.html 中加载生成的 dll 文件
经过上面的配置，公共库提取出来了，编译速度快了，但如果不引用生成的 dll 文件，网页是不能正常工作的。
打开 public/index.html，插入 script 标签。
...
到此公用库提取完成，但总觉得最后一部手工插入 script 不太优雅，下面介绍下如何自动引入生成的 dll 文件。
打开 vue.config.js 在 configurewebpack plugins节点下，配置 add-asset-html-webpack-plugin
const path = require('path')
const webpack = require('webpack')
const addassethtmlplugin = require('add-asset-html-webpack-plugin')
module.exports = {
...
configurewebpack: {
plugins: [
new webpack.dllreferenceplugin({
context: process.cwd(),
manifest: require('./public/vendor/vendor-manifest.json')
}),
// 将 dll 注入到 生成的 html 模板中
new addassethtmlplugin({
// dll文件位置
filepath: path.resolve(__dirname, './public/vendor/*.js'),
// dll 引用路径
publicpath: './vendor',
// dll最终输出的目录
outputpath: './vendor'
})
]
}
}
总结
以上所述是小编给大家介绍的vue-cli3 dllplugin 提取公用库的方法,希望对大家有所帮助
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
文章浏览阅读2.9k次，点赞8次，收藏14次。测试主要做什么？这完全都体现在测试流程中，同时测试流程是面试问题中出现频率最高的，这不仅是因为测试流程很重要，而是在面试过程中这短短的半小时到一个小时的时间，通过测试流程就可以判断出应聘者是否合适，故在测试流程中包含了测试工作的核心内容，例如需求分析，测试用例的设计，测试执行，缺陷等重要的过程。..._测试过程管理中包含哪些过程
文章浏览阅读870次，点赞16次，收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段，对政府政务进行数字化改革，提高政府工作效率，提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展，政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域，包括政策决策、政府服务、公共安全、社会治理等。在这些领域，人工...
文章浏览阅读219次，点赞2次，收藏4次。系统主要的用户为用户、管理员，他们的具体权限如下：用户：用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试，并且查看相关成绩用户可以进行错题集的整理管理员：管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析，并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件
文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式，UML2功能更强大，但是两者生成过程差别不大1.建立Test工程，如下图，uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图
文章浏览阅读174次。需求：一个topic包含很多个表信息，需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project，只有data和name。因为担心data里面会空值，所以根同事商量，让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区，proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka
文章浏览阅读380次。原标题：Java Spring中同时访问多种不同数据库 多样的工作要求，可以使用不同的工作方法，只要能获得结果，就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题，有时是必须把数据归档到某种数据仓库中，有时是要把数据变更推送到第三方数据库中。使用Spring框架时，使用单一数据库是非常容易的，但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库
文章浏览阅读3.6k次，点赞9次，收藏25次。本案例描述了晶振屏蔽以及开关电源变压器屏蔽对系统稳定工作的影响， 硬件设计时应考虑。_eft电路图
文章浏览阅读1.1k次。对于物料价格的更改，可以采取不同的手段：首先，我们来介绍MR21的方式。 需要说明的是，如果要对某一产品进行价格修改，必须满足的前提条件是： ■ 1、必须对价格生效的物料期间与对应会计期间进行开启； ■ 2、该产品在该物料期间未发生物料移动。执行MR21，例如更改物料1180051689的价格为20000元，系统提示“对于物料1180051689 存在一个当前或未来标准价格”，这是因为已经对该..._mr21 对于物料 zba89121 存在一个当前或未来标准价格
文章浏览阅读7.4k次，点赞3次，收藏13次。[文章导读]联想启天M420是一款商用台式电脑，预装的是win10系统，用户还是喜欢win7系统，该台式机采用的intel 8代i5 8500CPU，在安装安装win7时有很多问题，在安装win7时要在BIOS中“关闭安全启动”和“开启兼容模式”，并且安装过程中usb不能使用，要采用联想win7新机型安装，且默认采用的uefi+gpt模式，要改成legacy+mbr引导，那么联想启天M420台式电..._启天m420刷bios
文章浏览阅读2.7k次，点赞2次，收藏9次。一，为什么要冗余数据互联网数据量很大的业务场景，往往数据库需要进行水平切分来降低单库数据量。水平切分会有一个patition key，通过patition key的查询能..._保证冗余性
文章浏览阅读88次。是时候闭环Java应用了 原创 2016-08-16 张开涛 你曾经因为部署/上线而痛苦吗？你曾经因为要去运维那改配置而烦恼吗？在我接触过的一些部署/上线方式中，曾碰到过以下一些问题：1、程序代码和依赖都是人工上传到服务器，不是通过工具进行部署和发布；2、目录结构没有规范，jar启动时通过-classpath任意指定；3、fat jar，把程序代码、配置文件和依赖jar都打包到一个jar中，改配置..._那么需要把上面的defaultjavatyperesolver类打包到插件中
文章浏览阅读909次。1.得下载一个番茄插件，按alt+g才可以有函数跳转功能。2.不安装番茄插件，按F12也可以有跳转功能。3.进公司的VS工程是D:\sync\build\win路径，.sln才是打开工程的方式，一个是VS2005打开的，一个是VS2013打开的。4.公司库里的线程接口，在CmThreadManager.h 里，这个里面是我们的线程库，可以直接拿来用。CreateUserTaskThre..._番茄助手颜色