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

webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建

tree shaking可以先回顾下《再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6 》CommonJS 的设计过于灵活,对静态分析不友好。...使用 ES6 Module:不仅是项目本身,引入的库最好也是 es 版本,比如用 lodash-es 代替 lodash。...在编写支持 tree-shaking 的代码时,导入方式非常重要。你应该避免将整个库导入到单个 JavaScript 对象中。...当你这样做时,你是在告诉 Webpack 你需要整个库, Webpack 就不会摇它。以流行的库 Lodash 为例。一次导入整个库是一个很大的错误,但是导入单个的模块要好得多。...// 全部导入 (不支持 tree-shaking)import _ from 'lodash';// 具名导入(支持 tree-shaking)import { debounce } from 'lodash

78910
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue.js应用性能优化二

    通过使用以下技术,我们能够将初始bundle的大小减少70%并使其在眨眼间加载。 应用规模增长带来的问题 Vue-router是一个库,允许自然地将我们的Web应用程序拆分为单独的页面。...可以接受的延迟等待 300 - 1000ms 盯着网页,明显感觉到延迟 1000+ms 心里开始嘀咕,要不要离开 10,000+ms 先去别的地方逛逛吧,稍后见 使用vue-router进行基于路由的代码分割 为了避免弄巧成拙...我们只需要在那里动态导入组件,而不是将组件直接导入到路径对象中。仅当解析给定路线时才会下载路线组件。 所以不要像这样静态导入路径组件: ?...在这种情况下,从/about(About.vue)导航到/(Home.vue)将最终导致两次下载lodash。...整个应用有一个全局共享的vendor bundle。 ? 在chunks属性中,我们只是告诉webpack应该优化哪些代码块。您可能已经猜到了,将此属性设置为all,这意味着它应该优化所有代码块。

    2K30

    如何使用webpack减少vuejs打包的大小

    导致大型构建包的原因是什么? 首先,我需要了解导致大型构建包大小的原因。为此,我安装了webpack-bundle-analyzer。这将提供每个包中项目大小的可视指南。...Lodash仅在我们的框架中的所有应用程序中的两个位置使用。这只是两种方法的大量空间。 我们不止加载了lodash,我们也加载了vue-lodash。...第一步是移除package.json中没有使用到的vue-lodash。 下一步是仅从lodash导入我们需要的两个项目(库)。我们使用的是cloneDeep和sortBy。...我替换了导入整个lodash库的初始调用: import _ from 'lodash'; 我正在用这个只导入我们需要的两个项目(库)的调用替换它。...为此,我将导入从lodash更改为lodash/core。

    1.8K10

    【译】如何使用webpack减少vuejs打包的大小

    导致大型构建包的原因是什么? 首先,我需要了解导致大型构建包大小的原因。为此,我安装了webpack-bundle-analyzer。这将提供每个包中项目大小的可视指南。...Lodash仅在我们的框架中的所有应用程序中的两个位置使用。这只是两种方法的大量空间。 image.png 我们不止加载了lodash,我们也加载了vue-lodash。...第一步是移除package.json中没有使用到的vue-lodash。 下一步是仅从lodash导入我们需要的两个项目(库)。我们使用的是cloneDeep和sortBy。...我替换了导入整个lodash库的初始调用: import _ from 'lodash'; 我正在用这个只导入我们需要的两个项目(库)的调用替换它。...为此,我将导入从lodash更改为lodash/core。

    4.2K20

    几个你必须知道的React错误实践_2023-02-27

    当我们选择多层传递时,会导致一些性能问题,这也让 React 官方比较头疼。 props 透传会导致不必要的重新渲染。...导入代码超出实际所用的代码 React 是一个前端框架,它有着不小的代码体积。 我们在编写 React 程序时,应该避免导入很多用不到的模块。...额外的依赖会导致应用的体积膨胀,增加用户的加载时间,让网页变慢,降低用户体验度。...import _ from 'lodash' // 整个包导入 import _map from 'lodash/map' // 只导入需要的包 为了保证良好的用户体验度,我们应该让 FCP 保持在...在过去我们需要使用 lodash 这类库来实现这些功能,但是现在 lodash 的优势在慢慢减少。 当然这取决于你的用户是使用什么版本的浏览器和 JavaScript。

    75040

    几个你必须知道的React错误实践

    当我们选择多层传递时,会导致一些性能问题,这也让 React 官方比较头疼。 props 透传会导致不必要的重新渲染。...导入代码超出实际所用的代码React 是一个前端框架,它有着不小的代码体积。 我们在编写 React 程序时,应该避免导入很多用不到的模块。...额外的依赖会导致应用的体积膨胀,增加用户的加载时间,让网页变慢,降低用户体验度。...import _ from 'lodash' // 整个包导入import _map from 'lodash/map' // 只导入需要的包为了保证良好的用户体验度,我们应该让 FCP 保持在 1.8...在过去我们需要使用 lodash 这类库来实现这些功能,但是现在 lodash 的优势在慢慢减少。 当然这取决于你的用户是使用什么版本的浏览器和 JavaScript。

    75440

    2019数据库面试题:事务并发可能会导致哪些问题,mysql默认的是哪种级别,这种默认的隔离级别能够避免哪些问题?

    面试题:事务并发可能会导致哪些问题,数据库的隔离级别有哪些,mysql默认的是哪种级别,这种默认的隔离级别能够避免哪些问题?...read:可重复读:可以解决脏读和不可重复读 —mysql默认的 4、serializable:串行化:可以解决脏读不可重复读和虚读—相当于锁表 ① Serializable (串行化):可避免脏读...② Repeatable read (可重复读):可避免脏读、不可重复读的发生。  ③ Read committed (读已提交):可避免脏读的发生。  ...该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基于MySQL后台的完整数据库系统,MySQL运行时Innodb会在内存中建立缓冲池,用于缓冲数据和索引。...MyIASM引擎 MyIASM是MySQL默认的引擎,但是它没有提供对数据库事务的支持,也不支持行级锁和外键,因此当INSERT(插入)或UPDATE(更新)数据时即写操作需要锁定整个表,效率便会低一些

    1.9K20

    为什么 CommonJS 会使你的程序包变大

    由于在 2010 年代初期,浏览器中缺乏标准化的模块系统,CommonJS 也成为了 JavaScript 客户端库流行的模块格式。 CommonJS 是怎样影响最终包大小的?...你可能会问:为什么使用 CommonJS 会导致输出的包大了几乎 16,000 倍?当然这是一个例子而已,实际上大小差异可能没那么大,但是 CommonJS 很有可能大大的增加了你生产构建的大小。...为确保打包和压缩程序能够成功优化应用程序,应该避免依赖 CommonJS 模块,并在整个程序中使用 ES2015 模块语法。...在某些情况下,如果你使用的库遵循有关使用 CommonJS 的特定约定,则可以在构建时使用第三方 webpack 插件。...总结 为确保捆绑程序可以成功优化你的程序,请避免依赖 CommonJS 模块,并在整个程序中使用 ES2015 模块语法。

    96430

    体积太大,怎么拆包?--vite

    在传统的单 chunk 打包模式下,当项目代码越来越庞大,最后会导致浏览器下载一个巨大的文件,从页面加载性能的角度来说,主要会导致两个问题:无法做到按需加载,即使是当前页面不需要的代码也会进行加载。...线上缓存复用率极低,改动一行代码即可导致整个 bundle 产物缓存失效。...而通过Code Splitting我们可以将按需加载的代码拆分出单独的 chunk,这样应用在首屏加载时只需要加载Initial Chunk 即可,避免了冗余的加载过程,使页面性能得到提升。...由于构建工具一般会根据产物的内容生成哈希值,一旦内容变化就会导致整个 chunk 产物的强缓存失效,所以单 chunk 打包模式下的缓存命中率极低,基本为零。...chunk 中 'react-vendor': ['react', 'react-dom'], // 将 Lodash 库的代码单独打包 'lodash

    4.2K100

    React Native 启动速度优化——JS 篇(全网最全,值得收藏)

    其实谈到 JS Bundle 的优化,来来回回就是那么几条路: 缩:缩小 Bundle 的总体积,减少 JS 加载和解析的时间 延:动态导入(dynamic import),懒加载,按需加载,延迟执行...,避免全量引用 制定编码规范,减少重复代码 下面我们举几个例子来解释上面的三个思路。...对于 lodash 这么热门的工具库,社区上肯定有高人安排好了,`babel-plugin-lodash`[7] 这个 babel 插件,可以在 JS 编译时操作 AST 做如下的自动转换: import...把一些共有库打包到一个 common.bundle 文件里,我们每次只要动态下发业务包 businessA.bundle 和 businessB.bundle,然后在客户端实现先加载 common.bundle...business.android.bundle 当然使用相对路径作为 moduleId 打包时,不可避免的会导致包体积变大,我们可以使用 md5 计算一下相对路径,然后取前几位作为最后的 moduleId

    2.6K40

    将超过5000万行JS代码迁移到TypeScript,我们得到的10大见解

    我们的工具链会避免使用这些前景不明的特性,确保我们不断增长的 TypeScript 代码库是真正的 JS+Types。 标准对齐,OK! 2. 跟上编译器是值得的 TypeScript 发展迅速。...到目前为止,这一策略的效果很不错,我们已经能将整个代码库保持在最新版本的 TypeScript 上。这意味着我们不需要采取缓解措施,例如降低 DTS 文件的等级之类。 生态系统一致性,OK! 3....避免重复类型很重要 应用的性能是关键指标,因此我们试着尽量减少应用在运行时加载的 JS 数量。我们的平台确保在运行时仅使用一个版本的软件包。...我们特别想避免陈旧(staleness)问题和“nominal 地狱”,在这些情况下可能会通过“钻石模式”导入两个不兼容的 nominal 类型版本。...这样做的副作用是导致所有裸指定符的导入都相对于项目的根目录进行解析。

    1.7K30

    webpack5快发布了,你还没用过4吗?

    配置了按需引入 polyfill 后,用到 es6 以上的函数,babel 会自动导入相关的 polyfill,这样能大大减少打包编译后的体积。...babel-runtime 和 babel-polyfill 的区别 参考https://www.jianshu.com/p/73ba084795ce babel-polyfill 会”加载整个 polyfill...库”,针对编译的代码中新的 API 进行处理,并且在代码中插入一些帮助函数 babel-polyfill 解决了 Babel 不转换新 API 的问题,但是直接在代码中插入帮助函数,会导致污染了全局环境...,并且不同的代码文件中包含重复的代码,导致编译后的代码体积变大。...例如 require('library') 全局变量,当通过 script 脚本引入时 我们打包的 library 中可能会用到一些第三方库,诸如 lodash。

    1.6K40

    2025年该淘汰的5个JavaScript库

    随着JavaScript 的发展,一些库不可避免地落后了,无法跟上开发者社区对最新特性、范式和性能的期望。 是时候做出一些艰难的决定,告别不再像以前那样满足我们需求的某些库了。...Lodash Lodash是一个多用途实用程序库,曾经是几乎每个JavaScript项目中的主打库。它提供了有用的实用程序来简化从深度对象克隆到数组操作的一切。...在ES6及以后版本中,Object.assign()、扩展运算符和Array方法等功能在很大程度上消除了对Lodash的需求。该库也很大,导入单个函数通常会将大量额外开销引入您的项目。...对于Lodash确实提供独特便利性的少数几个极端情况,模块化导入(import { cloneDeep } from 'lodash/cloneDeep')可以最大限度地减少该库对包大小的影响。...将您的模块转换为 ES6 语法,并依赖 Webpack 或甚至原生模块加载工具来使您的代码库面向未来。

    13410

    Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking

    在某些情况下,我们并没有引入所有的导出,但Webpack仍会把整个模块都导入进来。这种情况下就需要使用tree shaking了,因为它能帮助我们去除掉用不到的代码。因此打包后的体积能显著下降。...Tree shaking函数库 如果你打算对函数库进行tree shaking,你需要记得上一段提到的是事情:使用ES6模块,而它并不是总是被函数库使用。一个绝佳的例子是lodash。...// index.js import _ from 'lodash'; console.log(_.debounce); 现在你的输出里包含了整个lodash库。...当使用import _ from 'lodash'时,这无法避免。但不要担心!有人已经思考过此问题,并创建了一个包叫做lodash-es。它以ES6模块的形式提供了lodash库。...库能够被Webpack进行tree shaking了。

    93320

    node_modules 困境

    我们发现这里存在个问题,虽然 mod-a 和 mod-d 依赖了同一个 mod-b 的版本,但是 mod-b 却安装了两遍,如果你的应用了很多的第三方库,同时第三方库共同依赖了一些很基础的第三方库如 lodash...,你会发现你的 node_modules 里充满了各种重复版本的 lodash,造成了极大的空间浪费,也导致 npm install 很慢,这既是臭名昭著的 node_modules hell。...其错误原因就在于全局的 types 形成了命名冲突,因此假如版本重复可能会导致全局的类型错误。 一般的解决方式就是自己控制包含哪些加载的 @types/xxx。...,与其协作的任何包都可能会挂掉,导致整个系统都需要全量的测试回归,最后的结果很大可能是整个应用彻底锁死版本,再也不敢做任何升级改动 因此 semver 的提出主要是用于控制每个 package 的影响范围...,我们只能选择将所有 package 的在 root-level 的 node_modules 一起打包 由于各个 package 是通过软链来实现互相支持导入的,这导致即使我们打包了 node_modules

    1.9K51

    【总结】1143- 10 个建立和维护大型 Vue.js 项目的最佳实践

    我还必须修复一些导致著名的意大利面条代码难题的错误做法。 因此,今天,我将与您分享10个最佳实践,如果您要处理大量的代码库,我建议您遵循这些最佳实践。...为避免因您的一个依赖项在半夜醒来破坏了整个项目,锁定所有软件包的版本会使您的早晨工作压力减轻。...为了避免您的应用程序变慢(尤其是在移动网络变慢的情况下),我在Visual Studio Code中使用了导入费用包。...这样,我可以从编辑器中直接看到导入的模块库有多大,并且可以查看导入的模块库过大时出了什么问题。 例如,在最近的项目中,导入了整个 lodash 库(压缩后大约24kB)。...通过在导入费用包中识别此问题后,我们通过以下方式解决了该问题: npm remove lodash npm install lodash.clonedeep 然后可以在需要的地方导入clonedeep

    1.3K10

    Webpack 打包优化之体积篇

    避免类库引而不用 倘若这类情况发生,对整个打包体积,不仅大而且亏。项目一旦大了,很难人为保证每个引入的类库,都被有用到,尤其是二次开发。...更可取的是,将项目所需的方法,统一引入,按需添加,组建出本地 lodash 类库,然后 export 给框架层(比如 Vue.prototype),以便全局使用;详情可参见:vue-modular-import-lodash...按需异步加载模块 关于前端开发优化,重要的一条是,尽可能合并请求及资源,如常用的请求数据合并,压缩合并 js,构造雪碧图诸此等等(当然得适当,注意体积,过大不宜);但,同时也当因需制宜,根据需要去异步加载...,避免无端就引入早成的浪费。...整个周末的敲敲打打,皆付之东流,泪崩泪目?。无奈之下,只得重新写过,直到夜深,才补齐关于体积优化那部分;毕竟涉及内容较多,干脆,就分成两部分来完成?。

    2K40

    【译】Node 模块之战:为什么 CommonJS 和 ES Module 不能共存?

    在解释这个问题的过程中,作者讲解了这两种模块具体的生命周期:何时加载?何时编译?何时执行?中间如何进行优化避免加载、编译或执行不必要的代码?...ESM 模块,但是相对同步的 require 来说,会有一些坑 ESM 模块可以 import CJS 模块,但是只能通过“默认导入”的模式,比如 import _ from 'lodash',而不支持...“命名导入”,比如 import {shuffle} from 'lodash'。.../lodash.cjs'; const {shuffle} = _; 这样的代码没啥缺点,CJS 库甚至可以被封装成 ESM 模块。 这样挺好,不过还可以有一些更好的方式。...执行顺序不可控会导致一些糟糕的问题 有些开发者提议过在执行 ESM 导入之前执行 CJS 导入。按照这个模式,CJS 的命名式导出就可以和在 ESM 的解析期执行。

    3.8K10
    领券