位置: IT常识 - 正文

webpack调优技巧(webpack怎么优化)

编辑:rootadmin
webpack优化主要有三个方面:1.提高构建速度,2.减少打包体积,3.优化用户体验 提高构建速度: 启用多线程 thread-loader 使用thread-loader插件可以启用多线程进行构建。 使用缓存 cache-loader 使用cache-loader插件可以对构建进行缓存,加快后续 ...

推荐整理分享webpack调优技巧(webpack怎么优化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:webpack做的优化,webpack常用配置,webpack优化方法,webpack优化方法,webpack常用配置,webpack使用,webpack使用,webpack使用,内容如对您有帮助,希望把文章链接给更多的朋友!

webpack优化主要有三个方面:1.提高构建速度,2.减少打包体积,3.优化用户体验

提高构建速度:

启用多线程thread-loader使用thread-loader插件可以启用多线程进行构建。

使用缓存cache-loader使用cache-loader插件可以对构建进行缓存,加快后续的构建速度。

热更新热更新只更新改动的代码文件,无需编译整个项目。

webpack调优技巧(webpack怎么优化)

exclude&includeexclude选项是构建时忽略的文件,include选项是构建时需要构建的文件。配置好exclude和include,可以避免对不必要的文件进行构建。

减少打包体积

压缩css代码css-minimizer-webpack-plugin

压缩js代码terser-webpack-plugin

tree-shakingtree-shaking就是只编译需要的代码。webpack5该特性默认启用。

source-mapsource-map帮助在源代码中定位bug。开发模式使用更精确但体积更大的source-map

module.exports = { mode: 'development', devtool: 'eval-cheap-module-source-map'}

生产模式使用体积小但不那么精确的source-map

module.exports = { mode: 'production', devtool: 'nosources-source-map'}打包分析webpack-bundle-analyzer插件可以看到各个文件的打包大小,帮助对对应的文件进行优化优化用户体验延迟加载模块在vue中,用下面箭头函数的方式引入模块,就可以按需加载模块。react的延迟加载和vue类似,angular也有自己的延迟加载方式。// src/router/index.jsconst routes = [ { path: '/login', name: 'login', component: login }, { path: '/home', name: 'home', // lazy-load component: () => import('../views/home/home.vue'), },]

Gzip最常见的压缩文件的算法。可以在网络传输中压缩数据,加快传输速度。需要后端的配合。插件 compression-webpack-plugin

base64小图片可以转成base64嵌进代码中,减少http请求数量。插件 asset-module

hash如下配置可以给打包文件加上hash后缀,生成hash后缀管理浏览器缓存。只要文件名和之前不同,浏览器就会向服务端重新请求文件。反之,浏览器会从协商缓存中读取文件。重新部署了项目,文件名称未修改,客户端不一定能获取到最新的代码。webpack会自动更改有改动的打包文件的hash后缀,可以自动实现文件的缓存管理。

output: { path: path.resolve(__dirname, '../dist'), filename: 'js/chunk-[contenthash].js', clean: true, },
本文链接地址:https://www.jiuchutong.com/zhishi/311737.html 转载请保留说明!

上一篇:python循环语句的两种类型(python循环语句的语法)

下一篇:【HDLBits刷题日记】08 Karnaugh Map to Circuit(高效刷题app)

  • 更正申报后可以作废吗
  • 发票一年不能开超多少才不扣税费
  • 银行业务结算内容
  • 扶贫算出差吗
  • 增值税晚交一个月会怎么样
  • 委托贷款利息收入账务处理
  • 退休人员返聘工资交个人所得税标准
  • 员工离职公司需要办理什么手续
  • 单位参加城镇职工基本养老保险缴费基数怎么填写
  • 合伙企业需要交企业所得税吗?
  • 代增值税专用发票网上申请
  • 购进药材如何抵扣进项税额
  • 发票打印机的字偏上
  • 单位参加城镇职工基本养老保险基数怎么填
  • 非直接结算是什么意思
  • 文化建设事业费优惠政策
  • 收到上级补助收入支出时财务会计怎么记账
  • 企业已交地税税金如何做账务处理?
  • 费用化和资本化对利润的影响
  • 长期股权投资减值准备是什么意思
  • 增值税即征即退会计处理
  • 一般纳税人增票流程
  • 电子发票无法预览怎么弄
  • 房屋租赁发票需要什么资料
  • 盈余积累转增股本的个税问题
  • 收到押金和支付押金的账务处理
  • 无形资产资本化和费用化的区别
  • mac dock不见了
  • 个税返还会计政策
  • 一般计税方法增值税
  • 营改增会计分录
  • 业务招待费的税收金额怎么算
  • 财务人员应计入什么科目
  • 员工交通补贴需要发票吗
  • python字符串操作作业
  • 应交税费会计分录例题
  • 外贸企业收到红字发票
  • 税款差0.05是怎么处理
  • php 字符串
  • 分公司不享受小规模纳税
  • 关系抽取系统的要求
  • 文心一言 VS ChatGPT
  • 有合同没有发票怎么入账
  • 会计计入其他业务收入的有哪些
  • ibm_db_dbi
  • 土地增值税是对转让什么并取得收入的单位和个人
  • 甲供材的卸料由谁负责
  • 给员工购买
  • 公转私户违法吗
  • 专利年费计入哪里
  • 房租费待摊分录怎么做
  • 税前弥补以前年度亏损
  • 营业成本增加额公式
  • 周转材料期末余额怎么算
  • 未发货先开发票
  • 建筑工程行业前景
  • 商品过期怎么做分录
  • win7断电后无法启动
  • windows7开机黑屏安全模式也进不去
  • centos 查看服务
  • 生产环境如何对linux进行合理分区
  • 怎么在bios里设置usb开关
  • linux oracle 12505
  • linux和windows关系
  • win7开机提示重启怎么办
  • win10 右下角
  • win7怎么看电脑ip地址
  • win8怎么删除输入法
  • win10推送升级win11
  • unity小技巧
  • jquery移除
  • 场景转换的技巧
  • Python爬取网易云音乐歌单内歌曲歌手封面播放地址
  • js设置页面大小
  • Python for Informatics 第11章之正则表达式(二)
  • 税控盘升级后开票流程
  • 辽宁地方税务网站官网
  • 烟台税务局举报电话号码
  • 北京市地方税务局2015第10号文件
  • 江西医保在线缴费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设