位置: 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)

  • 增值税发票平台怎么下载已认证发票
  • 商贸的增值税税率
  • 环境保护税是什么科目
  • 投资性房地产公允价值模式出售
  • 退回多报的教育费附加如何做账
  • 定期定额纳税申报表应税项应填哪个数
  • 外资企业对应的企业是什么
  • 企业安全防护措施有哪些
  • 长期股权投资稀释
  • 出口商品一定要有条形码吗
  • 收了公司的款项不拿回公司属于什么行为
  • 国税和地税分别占多少
  • 服务业发票税率是多少
  • 反倾销税由谁缴纳
  • 差额征税怎么交税
  • 单位的审计
  • 劳务报酬属于公司员工么
  • 电子发票隔月可以报销吗
  • 嵌入式软件开发工程师
  • 建筑行业暂估成本的会计分录怎么写
  • 工资发错了,多发了怎么办
  • 银行流水账单怎么查
  • 技术合同 免税
  • 企业汇算清缴后还能更正吗
  • 税务票开错了怎么办理退税
  • 资产负债比和资产负债率
  • 预提税和企业所得税
  • 收到生育津贴会计分录
  • 生产企业结账流程
  • 支付的测试报告怎么查
  • 享受企业所得税优惠政策的农产品初加工范围
  • 怎么做合同
  • AriaNg Native 1.2.4 Aria2图形界面下载工具 中文免费版 32/64位
  • 栀子花的养殖方法和注意事项茉莉花
  • 没有收入的情况下可以填成本吗
  • yolov5模型中git的作用
  • 微信小程序分包加载
  • 购买税盘的服务费全额抵扣怎么操作
  • qiankun跨域问题
  • 学堂在线结课后还能看吗
  • 基于区块链技术的什么特征可建立卷烟信息数据查询系统
  • 主动学习(Active Learning,AL)的理解以及代码流程讲解
  • ssh远程登录执行命令
  • 支付中介费和物业费比例
  • 以前年度支出如何计算
  • 社保的残保金的用途
  • Discus X 3 门户改造熊掌号网页教程
  • 农民专业合作组织法律制度的类型包括哪些?
  • 余额百分比法计提坏账准备
  • 销售收入和销售净收入的区别
  • 出口货物的报关时间为货物运抵海关
  • 欠款收不回来了会计分录
  • mysql注入的修复方式
  • 零申报对企业有什么影响
  • 商品购进核算
  • 收到建筑发票会计分录
  • 公司从个人手中购买设备
  • 哪些税金不计入应交税费
  • 企业对外购和自己的区别
  • Win10系统怎么删除管理员权限
  • ubuntu :wq
  • mac os 删除
  • linux系统基于
  • windows无法完成配置若要尝试恢复配置
  • win10企业版怎么连接无线网
  • win8的ie浏览器在哪里
  • linux安装和配置
  • win10怎么变回系统默认字体
  • centos安装总结
  • win7右键没有
  • win7支持快速启动吗
  • [置顶]游戏名:chivalry2
  • Custom List in inspector, displaying data your way[Unity]
  • Jquery针对tr td的一些实用操作方法(必看篇)
  • 设计一个投票程序
  • jquery 通过name获取元素
  • 基层税务局长工作职责
  • 税控盘时钟异常怎么办
  • 税务局全年绩效分析报告
  • 伊川娘娘山传说
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设