项目中webpack优化配置(持续更新)

项目中webpack优化配置

1. 开发效率, 体验

DLL(开发过程中减少构建时间和增加应用程序的性能)

使用 DllPlugin 进行分包,使用 DllReferencePlugin(索引链接) 对 manifest.json 引用,让一些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间。

使用方式如下:

DLL 配置文件 comfig/dll.js

const path = require('path')
module.exports = {entry: ['vue','vue-router','axios','element-ui','echarts', // 可视化'clipboard', // 复制'crypto-js', // 加密'js-cookie','js-md5',],output: path.join(__dirname, '../public/vendor'),inject: true,open: false,cacheFilePath: path.resolve(__dirname, './public')
}

在vue.config.js,引入配置
···
const dllConfig = require(‘./config/dll’)
module.exports = {
publicPath: ‘/’,
outputDir: ‘’,
assetsDir: ‘static’,
pluginOptions: {
dll: dllConfig
},
}
···

在package.json中添加:

 "scripts": {"dll": "vue-cli-service dll",},

第一次dev时运行以下命令:

  // 打包第三方包,提高打包效率npm run dll

运行完之后,会在public目录下创建一个vendor文件夹,里面就是将部分引用的包,进行了预编译。
在这里插入图片描述

优化resolve.modules配置和resolve.alias配置

  • resolve.modules:告诉webpack去那个目录下查找引用的模块。

  • resolve.alias:使用别名,减少输入路径长度,相比resolve.modules,因为没有省略路径,会直接去别名路径查找,减少搜索时间。

优化引入模块的路径

{resolve: {alias: {'@': resolve('src'),'@bizComp': resolve('src/components-biz'),'@service': resolve('src/service'), // 接口'@utils': resolve('src/utils'),'@mixins': resolve('src/mixins')},modules: [path.resolve(__dirname, "src"),path.resolve(__dirname, "node_modules"),"node_modules",],},
}

使用配置后的引入方式:
在这里插入图片描述

参考1

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/233560.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Groovy基础学习2

1.正则表达式 正则表达式是用于在文本中查找子字符串的模式。Groovy使用~“regex”表达式本地支持正则表达式。引号中包含的文本表示用于比较的表达式。 可以创建一个正则表达式对象: def regex ~"Groovy" 当定义正则表达式时,可以使用以下…

单元测试框架jUnit

JUnit(Java单元测试框架)是用于在Java应用程序中执行单元测试的框架。它是一个开源框架,广泛用于Java开发中。以下是一些关于JUnit的常见问题以及相应的汉语回答: 1. **什么是JUnit?** - JUnit是一个用于编写和运行…

大型语言模型:RoBERTa — 一种稳健优化的 BERT 方法

slavahead 一、介绍 BERT模型的出现BERT模型带来了NLP的重大进展。 BERT 的架构源自 Transformer,它在各种下游任务上取得了最先进的结果:语言建模、下一句预测、问答、NER标记等。 尽管 BERT 性能出色,研究人员仍在继续尝试其配置&#xff0…

Postman接口自动化测试之——批量执行(集合操作)

集合定义:在接口自动化测试过程中将一组请求(多条请求)保存到一起进行集中管理。方便执行过程中的维护、导出和执行等。 创建集合 在引导页点击“Collection”,或者在“Collection”标签点击图标; 字段解释 集合描述…

Oracle的学习心得和知识总结(三十一)| ODBC开放式数据库连接概述及应用程序开发

目录结构 注:提前言明 本文借鉴了以下博主、书籍或网站的内容,其列表如下: 1、参考书籍:《Oracle Database SQL Language Reference》 2、参考书籍:《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Gui…

无人机在融合通信系统中的应用

无人驾驶飞机简称“无人机”,是利用无线电遥控设备和自备的程序控制装置操纵的不载人飞行器,现今无人机在航拍、农业、快递运输、测绘、新闻报道多个领域中都有深度的应用。 在通信行业中,无人机广泛应用于交通,救援,消…

CentOS:Docker 创建及镜像删除

1、安装docker 远程连接服务器,可以直接下载netsarang比较好用 家庭/学校免费 - NetSarang Website 如果有残留docker未删除干净,请使用 sudo yum -y remove docker docker-common docker-selinux docker-engine Step1:安装必要的一些…

【数据结构】栈的使用|模拟实现|应用|栈与虚拟机栈和栈帧的区别

目录 一、栈(Stack) 1.1 概念 1.2 栈的使用 1.3 栈的模拟实现 1.4 栈的应用场景 1. 改变元素的序列 2. 将递归转化为循环 3. 括号匹配 4. 逆波兰表达式求值 5. 出栈入栈次序匹配 6. 最小栈 1.5 概念区分 一、栈(Stack) 1.1 概念 栈:一种特殊的线性表&…

第十七章 爬虫scrapy登录与中间件2

文章目录 数据盘区太快会报错,setting中配置延迟 连接提取器

解决:Android 报错 Failed to transform exifinterface-1.2.0.jar

一、问题说明 Failed to transform exifinterface-1.2.0.jar (androidx.exifinterface:exifinterface:1.2.0) to match attributes {artifactTypeandroid-classes-jar, org.gradle.categorylibrary, org.gradle.libraryelementsjar, org.gradle.statusrelease, org.gradle.usa…

LeeCode前端算法基础100题(11)-移除元素

一、问题详情: 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面的元素。 说明…

pycharm手动安装ini插件

pycharm中新增pytest.ini文件时发现,文件的图标不是配置文件的图标 原因是没有安装ini插件 安装插件的方式有很多种,今天通过去官网下载插件,再安装的方式 第一步:去官网搜索,地址是:https://plugins.jet…

使用深度学习的微光图像和视频增强:综述

1INTRODUCTION 微光图像增强(LLIE)旨在提高在光照较差的环境中捕获的图像的感知或可解释性。该领域的最新进展主要是基于深度学习的解决方案,其中采用了许多学习策略、网络结构、损失函数、训练数据等。在本文中,我们提供了一个全…

Python办公自动化 -- Excel和Word的操作运用

Python办公自动化 – Excel和Word的操作运用 文章目录 Python办公自动化 -- Excel和Word的操作运用前言一、如何使⽤Python操作Excel⽂件二、使用步骤1.使⽤openpyxl库2.使⽤pandas库 二、如何使⽤Python操作Word⽂档1. python-docx2.python-docx2txt3. pywin324. docxtemplate…

将包上传到 npm

将包上传到 npm 1.注册一个 npm 账号2.初始化包目录3.登录 npm4.构建包5.发布包6.注意事项 1.注册一个 npm 账号 在https://www.npmjs.com 上注册一个npm账号 2.初始化包目录 npm init这将引导你完成一些设置,如包名称、版本、描述等。按照提示输入相关信息。中间…

直流电、交流电和发电机、接地、变压器

直流电 此节内容主要摘录自:图文详解直流电与直流电路基本知识 直流电是指电流方向不随时间作周期性变化,由正极流向负极,但电流的大小可能会变化的电流。直流电可以分为稳定(恒定)直流和脉动直流两种,如下…

单片机应用实例:LED显示电脑电子钟

本例介绍一种用LED制作的电脑电子钟(电脑万年历)。其制作完成装潢后的照片如下图: 上图中,年、月、日及时间选用的是1.2寸共阳数码管,星期选用的是2.3寸数码管,温度选用的是0.5寸数码管,也可根据…

KafKa手动提交问题描述

KafKa手动提交offset问题描述 在分布式架构,我在XXJOB来进行调用接口产生数据,将数据提交KafKa进行存储;然后将KafKa中数据拿出来消费,在处理KafKa出来的数据时,调用另外一个服务时,正好另外一个服务挂了&…

UE5中C++对蓝图类的软引用方法

静态方法: 对资源的软引用: FSoftObjectPath MeshSoftRef("StaticMesh/Game/StarterContent/Props/SM_Door.SM_Door"); 对类的软引用: FSoftClassPath bpwidgetcalss(TEXT("Blueprint/Game/bp_widget.bp_widget_C"…

饥荒Mod 开发(十七):手动保存和加载,无限重生

饥荒Mod 开发(十六):五格装备栏 饥荒游戏会自动保存,本来是一个好的机制,但是当角色死亡的时候存档会被删除,又要从头开始,有可能一不小心玩了很久的档就直接给整没了,又或者是打怪没爆好东西, …