首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack:为什么缩小版的jquery比原版要大~20kb?

Webpack是一个现代化的静态模块打包工具,它可以将多个模块打包成一个或多个bundle文件,以提高前端应用的性能和加载速度。在Webpack中,通过使用各种加载器和插件,可以对代码进行优化、压缩和分割,以减小打包后的文件大小。

对于为什么缩小版的jquery比原版要大约20kb,可能有以下几个原因:

  1. 代码压缩方式不同:Webpack默认使用UglifyJS插件对代码进行压缩,而原版的jquery可能使用了其他压缩方式。不同的压缩方式可能会导致压缩后的文件大小有所不同。
  2. 模块依赖处理:Webpack会将所有模块打包成一个bundle文件,而原版的jquery可能是按需加载的,只包含需要的模块。因此,缩小版的jquery可能包含了更多的代码,导致文件大小增加。
  3. 额外的功能或插件:缩小版的jquery可能包含了一些额外的功能或插件,这些功能或插件可能增加了代码的复杂性和文件大小。

总之,Webpack的打包过程中可能会对代码进行优化和压缩,但由于不同的配置和处理方式,缩小版的jquery可能会比原版要大约20kb。对于优化文件大小,可以通过调整Webpack的配置、使用其他的压缩插件或手动删除不必要的代码来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用Webpack5创建Vue2项目及优化

以上babel配置是官网提供主要用来解决业务代码js语法转译用,当生成类库或者组件库时上面这种配置会污染全局变量,需要使用@babel/plugin-transform-runtime 在根目录下创建...缩小范围 在配置 loader 时候,我们需要更精确去指定 loader 作用目录或者需要排除目录,通过使用 include 和 exclude 两个配置项,可以实现这个功能,常见例如: include...JS缓存 babel-loader 开启缓存 babel 在转译 js 过程中时间开销比价,将 babel-loader 执行结果缓存起来,重新打包时候,直接读取缓存 缓存位置: node_modules...webpack 将根据以下条件自动拆分 chunks: 新 chunk 可以被共享,或者模块来自于 node_modules 文件夹 新 chunk 体积大于 20kb(在进行 min+gz 之前体积...(≈ 20kb) minRemainingSize: 0, // 确保拆分后剩余最小 chunk 体积超过限制来避免大小为零模块 minChunks: 1, // 拆分前必须共享模块最小

2.6K10

webpack使用优化(基本篇)

为什么要使用Webpack 与react一类模块化开发框架搭配着用比较好。 属于配置型构建工具,比较用容易上手,160行代码可大致实现gulp400行才能实现功能。...Webpack配置主要为了这几大项目: entry:js入口源文件 output:生成文件 module:进行字符串处理 resolve:文件路径指向 plugins:插件,loader更强大,...上图是初始化构建30个文件用时,一共用了13秒。用了externals优化后,还有100多kb,用纯webpack优化50多kb。...有样boilerplate项目吗 目前有一个还没有成型,我先放在这里,目前可以通过查看gulpfile.js和webpack.config.js文件进行学习 steamer_branch_v2。...成为boilerplate还待我花一周时间整理。 推荐文章 开发工具心得:如何 10 倍提高你 Webpack 构建效率

1.8K100

vue单页面应用首次访问速度优化

js占用大小 工具使用webpack.prod.conf.js 中 增加 const BundleAnalyzerPlugin = require('webpack-bundle-...2、改为cdn引用(强烈推荐) 因为我自身服务器只有1M网速,文件问题有时候就算压缩也是解决不了,有些非常公用插件bootstrap vue jquery css之类建议使用...cdn外部引用,如图 image.png 我本身构建vue包后,最大文件快5M,实在太大了,使用cdn公共服务器引入后,大概能缩小到1m,但是这样也不是我们 最终大小,继续优化...$/i, // 哪些文件压缩 filename: '[path].gz[query]', // 压缩后文件名 algorithm: 'gzip', // 使用gzip压缩 minRatio...,通过以上优化,我1m网速服务器基本可以做到1秒左右打开服务器(有时候取决于cdn网速, 很关键) 总结:以上优化操作,基本可以将我最初40秒初始访问页面速度提升到1、2秒,文件请求大概缩小

1.4K41

用 ReactVue 不如用 jQuery

我知道看到这个标题,很多人第一反应是不理解,jQuery 不就是远古时代产物吗,不都已经被淘汰了吗?它能 React/Vue 更好?这不会是一篇标题党文章吧?...但,我非常明确是,这不是标题党,而是在说一个客观事实。接下来,我来给大家分析一下,为什么 jQuery React/Vue 更好。...我们可以相对清晰知道当我改变一个数据时,有两个事情完成,一个是改变数据,一个是重新修改 UI. 我们也可以缩小修改范围,从而达到最极限性能,自由度非常高。...我们完全没有必要在所有场景,都去花费那么代价去考虑如何将数据与 UI 绑定在一起。...事实上,当你研发大型高性能前端项目时,React 和 jQuery 最终都会殊途同归。我们也会想办法在 React 中放弃自顶向下 diff,然后把改动缩小在可控范围里。

22010

webpack性能优化简要

"), path.resolve(__dirname, "vendor/styles") ] } 优化方案 通过缩小模块查找范围来减少查找时间 2.优化第三方模块查找范围 resolve.modules...此配置在用户导入模块不携带后缀时会根据配置项中后缀进行匹配查找 // v5.25.1本默认值 extensions: [".js", ".json"] 优化方案 使用合理后缀列表 导入模块时指明后缀...: npm install terser-webpack-plugin --save-dev 示例: const TerserPlugin = require('terser-webpack-plugin...bundle中,而是在运行时去外部获取这些依赖 例如,从 CDN 引入 jQuery,而不是把它打包: index.html <script src="https://code.<em>jquery</em>.com..."> webpack.config.js externals: { jquery: 'jQuery' } 依赖使用不变 import $ from 'jquery'; $('.my-element

58030

【分享】Vue.js新手入门指南

单页应用程序中一般交互处理非常多,而且页面中内容需要根据用户操作动态变化。 4.你前面说网页知乎我也可以用JQuery写啊,为什么要用Vue.js呢?...当你在编写项目的时候遇到了这种问题,你一定会抱怨,为什么世上会有HTML这种像盗梦空间一样需要无数div嵌套才能做出页面的语言,为什么当初学JQuery看中是它简洁DOM操作,现在却一点也不觉得它有多简洁...不要紧,我们先来了解一下为什么要用Webpack,然后带着原因去学习就好了。...还有前面讲到了Webpack是一个前端打包工具,前端代码为什么打包呢?...可惜前端终究是前端,如果一个对于前端各个方面没有深入认识就想着能一步登天,肯定对不起前端”字。

3.5K40

webpack构建优化:bundle体积从3M到400k之路

赶紧打开chrome (disable cache): image.png 哇,吓了一跳,这打包出来JS辣么:lib.js 2.3M(花了14s 才加载完)、app.js 1.2M(花了9s多加载完...1、祭出神器把Bundle分析利器拿出来:   webpack-bundle-analyzer是一个基于webpack插件,能够用zoomable treemap可视化webpack输出文件大小(Visualize...vue-router.min.js"> 为什么这么做呢...因为vue和vue-router在cdn上都提供了minjs,已经是压缩精简,而vue-i18n.js官方网站也建议使用cdn方式引入,没必要将都打包到app.js中。...同样用webpack-bundle-analyzer,如图所示:里面体积最大分别是element-ui、vue2-editor、highchart、jquery等 image.png 以前webpack.lib.config.js

4K50

Day01_webpack

别人使用你包必须下载依赖, 比如yarn add jquery * devDependencies 开发你包需要依赖包, 比如yarn add webpack webpack-cli -...webpack官网 现代 javascript 应用程序 静态模块打包器 (module bundler) 为 vue-cli 开发环境做铺垫 webpack能做什么 把很多文件打包整合到一起..., 缩小项目体积, 提高加载速度(演示准备好例子) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-547f4cNB-1664811038877)(images/image...目标: 用asset module方式(webpack5本新增) asset module文档 如果使用webpack5, 直接配置在webpack.config.js - rules..., 实际工作中, 打包 yarn build 非常费时 (30s - 60s) 之间 为什么费时?

1.6K20

Webpack构建速度优化

目录缩小范围noParseIgnorePlugin优化 resolve 配置externals缓存缩小范围在配置 loader 时候,我们需要更精确去指定 loader 作用目录或者需要排除目录...,比如jQuery,在这些包内部是肯定不会依赖别的包,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析 import、require 等语法module...:{ noParse:/jquery|lodash/}IgnorePlugin有很多第三方包内部会做国际化处理,包含很多语言包,而这些语言包对我们来说时没有多大用处,只会增大包体积,我们完全可以忽略掉这些语言包...用法requestRegExp 表示忽略路径。contextRegExp 表示忽略文件夹目录。.../'], config: [__filename], }, },babel-loader 开启缓存abel 在转译 js 过程中时间开销比价,将 babel-loader

1.6K10

Webpack构建速度优化指南

目录缩小范围noParseIgnorePlugin优化 resolve 配置externals缓存缩小范围在配置 loader 时候,我们需要更精确去指定 loader 作用目录或者需要排除目录...,比如jQuery,在这些包内部是肯定不会依赖别的包,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析 import、require 等语法module...:{ noParse:/jquery|lodash/}IgnorePlugin有很多第三方包内部会做国际化处理,包含很多语言包,而这些语言包对我们来说时没有多大用处,只会增大包体积,我们完全可以忽略掉这些语言包...用法requestRegExp 表示忽略路径。contextRegExp 表示忽略文件夹目录。.../'], config: [__filename], }, },babel-loader 开启缓存abel 在转译 js 过程中时间开销比价,将 babel-loader

1.5K20

Webpack】538- 打包速度提升指南

webpack4 默认内置使用 terser-webpack-plugin 插件压缩优化代码,而该插件使用 terser 来缩小 JavaScript 。 terser 是什么?...所谓 terser,官方给出定义是: 用于 ES6+ JavaScript 解析器、mangler/compressor(压缩器)工具包。 为什么 webpack 选择 terser?...减小不必要编译工作 webpack 打包时,会从配置 entry 触发,解析入口文件导入语句,再递归解析,在遇到导入语句时 webpack 会做两件事情: 根据导入语句去寻找对应导入文件...原因是一些库,例如 jQuery 、ChartJS, 它们庞大又没有采用模块化标准,让 Webpack 去解析这些文件耗时又没有意义。 7....module: { // 项目中使用 jquery 并没有采用模块化标准,webpack 忽略它 noParse: /jquery/, rules: [ {

2K30

入门webpack最佳实践(基于webpack4.X 5.X)--打包速度优化

目录缩小范围noParseIgnorePlugin优化 resolve 配置externals缓存缩小范围在配置 loader 时候,我们需要更精确去指定 loader 作用目录或者需要排除目录...,比如jQuery,在这些包内部是肯定不会依赖别的包,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析 import、require 等语法module...用法requestRegExp 表示忽略路径。...new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });contextRegExp 表示忽略文件夹目录。.../cache/#cachebabel-loader 开启缓存abel 在转译 js 过程中时间开销比价,将 babel-loader 执行结果缓存起来,重新打包时候,直接读取缓存缓存位置: node_modules

1.1K20

入门webpack最佳实践(基于webpack4.X 5.X)--打包速度优化

目录 缩小范围 noParse IgnorePlugin 优化 resolve 配置 externals 缓存 缩小范围 在配置 loader 时候,我们需要更精确去指定 loader 作用目录或者需要排除目录...,比如jQuery,在这些包内部是肯定不会依赖别的包,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析 import、require 等语法 module...:{ noParse:/jquery|lodash/ } IgnorePlugin 有很多第三方包内部会做国际化处理,包含很多语言包,而这些语言包对我们来说时没有多大用处,只会增大包体积...用法 requestRegExp 表示忽略路径。 contextRegExp 表示忽略文件夹目录。.../cache/#cache babel-loader 开启缓存 abel 在转译 js 过程中时间开销比价,将 babel-loader 执行结果缓存起来,重新打包时候,直接读取缓存 缓存位置:

98930

前端插件以及部分细分网址梳理

EventEmitter: 浏览器 EventEmitter jquery.serializeJSON: jQuery 插件,用于将 form 表单序列化成 JSON 数据 knockout: 前端...语法 flow: 一个用来检测 Javascript 语法错误库, Facebook 出品 zoomooz: jQuery 插件,用来处理浏览器缩放 fancyBox: 一个用于放大缩小图片、Web...Medium 中效果 jquery-validation: jQuery 一个插件,用于校验 Form 表单 BigVideo.js: jQuery 一个插件, 用于实现背景(视频、图片)效果... Firefox jquery-mobile: jQuery 团队开发用于辅助手机端 web app 开发库,基于 HTML5 mobile-angular-ui: 基于angularjs和bootstarp...Webpack 中文指南 http://webpackdoc.com/ webpack实例 一小时包教会 —— webpack 入门指南 http://www.w2bc.com/Article/50764

5.6K90

TurboPack,会是下一个前端构建利器吗?

据TurboPack官方自己介绍,对于大型前端项目,TurbopackVite快10x,而比Webpack则快700x,这个提升可能说是非常有价值....在前前端阶段,以JS(JQuery为主) +HTML + CSS原始方式进行前端开发,在这个阶段,前端并未出现创新式技术或开发方式,仍然以HTML+JS+CSS直接式开发为主.比如最著名JQuery...Webpack作用就是构建,在后前端阶段,开发与部署已经脱离.开发使用语言,框架与代码与最终部署代码区别开来.而在以间,你使用JQuery,开发写代码就是你最终部署代码,是一致....为什么另起炉造 原因很简单:Webpack太慢了 早期,Webpack可以说是颠覆性工具,它在前端作用与我们后端Java中Maven或Gradle有点类似....使用Swc来做TS/JS转换 关于为什么JS/TS转换,这个我在《数十倍性能优势,使用swc来取代babel》文章中详细解释过了,就不再重复解释.

1.4K30

十三:自动生成HTML文件

在真实生产环境中,运行webpack进行打包后,完整index.html应该是被自动生成。例如静态资源、js 脚本都被自动插入了。而不是像之前教程那样根据生成文件手动插入。...为什么自动生成 HTML? 看过这个系列教程朋友,都知道在之前例子中,每次执行webpack打包生成js文件后,都必须在index.html中手动插入打包好文件路径。...但在真实生产环境中,一次运行webpack后,完整index.html应该是被自动生成。例如静态资源、js 脚本都被自动插入了。...编写 HTML 文件 根目录下index.html会被html-webpack-plugin作为最终生成 html 文件模板。打包后,相关引用关系和文件路径都会按照正确配置被添加进去。...[ext]", limit: 10000, // size <= 20KB publicPath

2.1K10

React 如何转 Vue.js

Webpack 设置中一个模块 都有独立但常用路由器和状态管理库 它们最大区别在于 Vue 通常使用 HTML 模板文件,而 React 是完全使用 JavaScript。...这就是为什么在 Vue 中不需要 shouldComponentUpdate 原因。 主模板 关于主模板文件,Vue 更像 Angular。与 React 一样,Vue 需要挂载在页面的某个位置。...Vue 作者尤雨溪将他项目称为“渐进式框架”,因为它可以扩展到复杂应用程序,或缩小到简单应用程序。...大于 20KB。 单文件组件 如果你乐意使用 Webpack 工具作为项目添加构建步骤,则可以使用 Vue 单文件组件(SFC)。...在构建过程中, 模板被转换为一个渲染函数,因此这是浏览器中精简 vue.runtime.js 完美用例。

3.3K20
领券