cli dll打包 vue_vue-cli3 DllPlugin 提取公用库的方法_幻想青年卢六六的博客-程序员宅基地

技术标签: cli dll打包 vue  

vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间。开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来,就能减少打包体积,加快编译速度。本文主要讲述在 vue-cli3 中利用 dllplugin 来进行预编译。

1、安装相关插件

yarn add [email protected]^3.2.3 [email protected]^3.1.3 [email protected]^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 提取公用库的方法,希望对大家有所帮助

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42261886/article/details/112839921

智能推荐

较简单明了的一篇制作sublime Text插件的教程_ArchurSpace的博客-程序员宅基地

转载自http://www.welefen.com/how-to-develop-sublime-text-plugin.htmlSublimeText是一个超赞的编辑器,具体有跨平台(window/linux/mac)和高性能等诸多特点,使用python开发,安装包10M都不到。如果你对SublimeText还不够了解,请阅读Sublime Text 2 入门及技巧,Sublime

SQL Replay使用指南_weixin_30755709的博客-程序员宅基地

一. SQL Replay简介 SQL Replay它是SQL Server Profiler中的一个trace模板,它将收集数据库服务器中必要的事件trace,用于在相同或不同的服务器上回放。通过改进模板脚本,我们可以更好的生成自定义的回放trace。这类trace主要可以帮助我们分析语句在同一台服务器的不同数据库对象上运行的性能(如索引、主键等),检测这些数据库对象变更前后的性能差异;也可以分...

linux 外部中断例子_DriverMonkey的博客-程序员宅基地

code:#include #include #include #include #include #include #include #include #include #include #include #include #include #include #define GPIO_TO_PIN(bank, gpio) (32 *

grub4dos引导启动linux,grub4dos中怎么样调用syslinux引导_韶颜girl的博客-程序员宅基地

配置grub ; 其实最简单的配置方法不是来自于图形的点鼠标,初学Linux的弟兄可能会说,我不点鼠标,我能做什么?呵。。。。没错,但在配置 grub的过程中,最没有效率的就是点鼠标;其实我们点了十几分钟的鼠标,也是达到一个目的,就是把grub配置起来。而他的配置文件就是c:\grub \menu.lst ,我们挥汗如雨的点鼠标,无非是配置这个文件;如果不用点鼠标的办法来配置, 一分钟都不到就OK...

(96)Verilog HDL:点灯设计_宁静致远dream的博客-程序员宅基地

(96)Verilog HDL:点灯设计1.1 目录1)目录2)FPGA简介3)Verilog HDL简介4)Verilog HDL:点灯设计5)结语1.2 FPGA简介FPGA(Field Programmable Gate Array)是在PAL、GAL等可编程器件的基础上进一步发展的产物。它是作为专用集成电路(ASIC)领域中的一种半定制电路而出现的,既解决了定制电路的不足,又克服了原有可编程器件门电路数有限的缺点。FPGA设计不是简单的芯片研究,主要是利用 FPG

Struts2 处理 json_信行合一的博客-程序员宅基地

早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具体应用了,但苦于一直忙于工作难以抽身,渐渐的也淡忘了此事。直到前两天有同事在工作中遇到这个问题,来找我询问,我又细细地给他讲了一遍之后,才觉得无论如何要抽一个小时的时间来写这篇文章,从头到尾将Struts2与JSON的关系说清楚。 其实网络中,关于这个问题的答案已是海量,我当初也是从这海量的

随便推点

求html写一个羽毛球拍的代码,羽毛球网站html静态代码_weixin_39771969的博客-程序员宅基地

【实例简介】【实例截图】【核心代码】网页实训├── css│ ├── css.css│ ├── dongtai.css│ ├── dongtaixiangxi.css│ ├── login.css│ ├── shangcheng.css│ ├── shangpin.css│ ├── shipin.css│ ├── swiper.min.css│ ├── xinw...

微信小程序封装API接口_ToDeer的博客-程序员宅基地_微信小程序封装接口

微信小程序封装API接口1. 首先在微信小程序管理后台中注册域名2. 新建文件夹http,api是封装的接口函数,env是设置公共访问的url,http是二次封装wx.request();3. env.js//设置公共访问的url,即环境变量module.exports = { // 开发环境 dev: { baseUrl: 'http://localhost:3000' }, // 测试环境 test: { baseUrl: 'www.test.com'

R语言学习笔记_小轩精品文章的博客-程序员宅基地

目的通过数据分析信息。数据挖掘数据分析过程越准确,决策过程就越正确。六步骤1.数据采集2.数据存储3.数据分析4.数据挖掘5.数据可视化化6.进行决策1.数据采集采集的数据称为源数据手工记录,网络爬虫。2.数据存储将数据存储在数据仓库中将数据收集到计算机中。如将数据存储在excel,过多使用数据库3.数据统计有的是不是线性的。、合适的统计方法等4.用数据挖掘 DataMining又称为资料勘探丶数据采矿。计算科学有关,诸多方法。同样的数据不同的人得到不同的结果。(挖掘

一文读懂傅里叶变换的几何解释_程序猿老甘的博客-程序员宅基地_傅立叶变换的几何解释

我读硕士的时候就一直搞不清楚图像处理里基于傅里叶变换的时频计算到底是个什么东西。我只是模糊的知道傅里叶离散变换公式,可以将灰度图对应到频域中,然后做一些操作,滤掉一些信息,然后反向映射回时域,似乎有一些效果, 比如模糊,锐化等等。又比如,我知道傅里叶变换的一些基本观点,如波的叠加以及周期性的计算可以表示各种信息,如图像、声音等。傅里叶变换的目标就是把信息分解为频率清楚的波。可是,它背后的原理是什么,这种变换是否有直观的解释?直到我在B站上学习了2Blue1Brown频道的双语课程,介绍了傅里叶变换的几何解释

LeetCode215:数组中的第K个最大元素 (C、C++实现)_松鼠大哥的博客-程序员宅基地

题目LintCode20.有效的括号https://leetcode-cn.com/problems/kth-largest-element-in-an-array/在未排序的数组中找到第 k 个最大的元素。请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素。示例 1:输入: [3,2,1,5,6,4] 和 k = 2输出: 5示例 2:输入: [3...

Python_7分钟笔记_基础四(函数、递归)_金融&&编程的博客-程序员宅基地

本期笔记内容综述 Python函数定义再回顾 函数的参数传递 Python函数递归问题 7分钟学习系列1.Python函数再回顾著名的斐波拉契数列除了第一个数和第二个数外,任意一个数都可由前两个数相加得到:1,1,2,3,5,13,21,34····且先看看定义 F1=1 F2=1 将上面文字转化为符号语言:Fn=Fn-1+Fn-2...