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

  • 小微企业减半征收印花税代码
  • 普通增值税税率多少
  • 小规模纳税人未开票收入如何填申报表
  • 一般纳税人购销合同印花税计税依据
  • 其他收益科目在哪个科目前面填
  • 其他项目工会筹备金怎么报税
  • 对公账户给私人转账手续费
  • 应交税金借方余额代表什么
  • 一般纳税人广告
  • 房地产企业开发间接费用包括哪些
  • 包装材料报废后如何做会计核算?
  • 报名费发票开什么项目
  • 企业结转已销产品的生产成本
  • 在建工程需要交哪些税
  • 7月认证的发票7月可以抵扣吗?
  • 假设公司为增值税一般纳税人
  • 产值指的是财务报表哪个数值
  • 进货会计凭证
  • 个体不超过10万怎么交税
  • 付款账号姓名是什么意思
  • 收到劳务外包发票计入什么科目
  • 对公账户转账有延迟吗
  • 一般纳税人专票和普票有什么区别
  • 低值易耗品与固定资产有相同的特征,表现在哪里?
  • win7为什么现在不能用了
  • 欠条和收条,哪个更真实
  • php环境配置教程Apace
  • hprj是什么文件
  • 小规模纳税人销售商品会计分录
  • 网线超五类好还是六类好
  • 通行费发票怎么做分录
  • 第二季度企业所得税怎么算出来
  • 招聘退休人员北京宿管
  • php合并字符串函数
  • php7 nginx
  • 小微企业声明函去哪个部门开
  • 存货盘盈盘亏会涉及到其他应收款吗
  • 所得税弥补亏损年限10
  • 土地使用税的征税范围有哪些
  • 免税增值税纳税申报表怎么填
  • mysql事务引擎
  • 预缴分包抵扣,所有分包都可以抵扣吗
  • 什么情况下要去y加ies
  • 如何把excel数据导入到word表格
  • db2 insert timestamp
  • 存货周转率是指企业某一会计
  • 二手房交易需缴纳哪些费用
  • 限制性股票应纳税额的确定
  • 在职职工暖气费补助款
  • 报废的固定资产清理的净损失计入营业外支出
  • 银行承兑汇票背面怎么填写
  • 什么差旅费
  • 职工外地就医怎么报销
  • 工程款发票怎么做分录
  • 信息技术服务费可以全额抵扣吗
  • 研发费加计扣除申报表怎么填
  • 汇兑损益分录如何写
  • 增值税专用发票使用规定 最新
  • 现金折扣定价案例
  • 7.0 Release i386 DVD iso 下载
  • logo是什么文件夹
  • os x10.11el capitan公测版下载地址(公测版计划注册教程)
  • win7如何使用usb无线网卡
  • Linux系统配置IP地址
  • win10商店没有图标
  • cocos2dx怎么读
  • unity特效制作教程
  • unity3d c语言
  • js生成d.ts
  • material design app
  • css滚动条设置
  • python安装pip.whl
  • javascript高级程序设计pdf百度云
  • 完美解决怠速抖动加油就平稳
  • javascript入门教学
  • python 内置函数什么用来返回序列中的最大元素
  • Python for Informatics 第11章之正则表达式(四)
  • 江苏省国家税务局总局官网
  • 江苏房产税如何计算公式
  • 河北耕地占用税最新规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设