{"id":92874,"date":"2022-09-29T13:41:21","date_gmt":"2022-09-29T11:41:21","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/"},"modified":"2020-10-10T06:12:06","modified_gmt":"2020-10-10T09:12:06","slug":"como-commonjs-esta-agrandando-sus-paquetes","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/","title":{"rendered":"Wie CommonJS seine Pakete vergr\u00f6\u00dfert"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#%C2%BFQue-es-CommonJS\" >\u00bfQu\u00e9 es CommonJS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#%C2%BFComo-afecta-CommonJS-al-tamano-final-de-su-paquete\" >\u00bfC\u00f3mo afecta CommonJS al tama\u00f1o final de su paquete?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#%C2%BFPor-que-CommonJS-agranda-su-aplicacion\" >\u00bfPor qu\u00e9 CommonJS agranda su aplicaci\u00f3n?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#Sacudir-arboles-con-CommonJS\" >Sacudir \u00e1rboles con CommonJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#Conclusion\" >Conclusi\u00f3n<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Descubra c\u00f3mo los m\u00f3dulos de CommonJS est\u00e1n impactando el cambio de \u00e1rbol de su aplicaci\u00f3n\n        <\/p>\n<p>\n          <time>8 de mayo de 2020<\/time><br \/>\n            Actualizado <time>26 de mayo de 2020<\/time>\n        <\/p>\n<div class=\"w-layout-container--narrow w-post-signpost\">\n  <span class=\"w-post-signpost__title\">Aparece en:<\/span><br \/>\n  Tiempos de carga r\u00e1pidos\n<\/div>\n<\/header>\n<p>En esta publicaci\u00f3n, veremos qu\u00e9 es CommonJS y por qu\u00e9 hace que sus paquetes de JavaScript sean m\u00e1s grandes de lo necesario.<\/p>\n<p>Resumen: <strong>Para asegurarse de que el empaquetador pueda optimizar con \u00e9xito su aplicaci\u00f3n, evite depender de los m\u00f3dulos CommonJS y utilice la sintaxis del m\u00f3dulo ECMAScript en toda su aplicaci\u00f3n.<\/strong><\/p>\n<h2 id=\"what's-commonjs\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-es-CommonJS\"><\/span>\u00bfQu\u00e9 es CommonJS? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CommonJS es un est\u00e1ndar de 2009 que estableci\u00f3 convenciones para m\u00f3dulos JavaScript.  Inicialmente estaba destinado a ser utilizado fuera del navegador web, principalmente para aplicaciones del lado del servidor.<\/p>\n<p>Con CommonJS puede definir m\u00f3dulos, exportar la funcionalidad de ellos e importarlos en otros m\u00f3dulos.  Por ejemplo, el fragmento a continuaci\u00f3n define un m\u00f3dulo que exporta cinco funciones: <code>add<\/code>, <code>subtract<\/code>, <code>multiply<\/code>, <code>divide<\/code>y <code>max<\/code>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> maxBy <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'lodash-es'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> fns <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function-variable function\">add<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">+<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">subtract<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">multiply<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">*<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">divide<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">\/<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">max<\/span><span class=\"token operator\">:<\/span> <span class=\"token parameter\">arr<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token function\">maxBy<\/span><span class=\"token punctuation\">(<\/span>arr<span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p>Object<span class=\"token punctuation\">.<\/span><span class=\"token function\">keys<\/span><span class=\"token punctuation\">(<\/span>fns<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">fnName<\/span> <span class=\"token operator\">=&gt;<\/span> module<span class=\"token punctuation\">.<\/span>exports<span class=\"token punctuation\">[<\/span>fnName<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> fns<span class=\"token punctuation\">[<\/span>fnName<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>M\u00e1s adelante, otro m\u00f3dulo puede importar y utilizar algunas o todas estas funciones:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> add <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span>\u2018<span class=\"token punctuation\">.<\/span><span class=\"token operator\">\/<\/span>utils'<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Invocando <code>index.js<\/code> con <code>node<\/code> dar\u00e1 salida al n\u00famero <code>3<\/code> en la consola.<\/p>\n<p>Debido a la falta de un sistema de m\u00f3dulos estandarizado en el navegador a principios de la d\u00e9cada de 2010, CommonJS tambi\u00e9n se convirti\u00f3 en un formato de m\u00f3dulo popular para las bibliotecas del lado del cliente de JavaScript.<\/p>\n<h2 id=\"how-does-commonjs-affect-your-final-bundle-size\"><span class=\"ez-toc-section\" id=\"%C2%BFComo-afecta-CommonJS-al-tamano-final-de-su-paquete\"><\/span>\u00bfC\u00f3mo afecta CommonJS al tama\u00f1o final de su paquete? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El tama\u00f1o de su aplicaci\u00f3n JavaScript del lado del servidor no es tan cr\u00edtico como en el navegador, por eso CommonJS no fue dise\u00f1ado para reducir el tama\u00f1o del paquete de producci\u00f3n en mente.  Al mismo tiempo, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/v8.dev\/blog\/cost-of-javascript-2019\">an\u00e1lisis<\/a> muestra que el tama\u00f1o del paquete de JavaScript sigue siendo la raz\u00f3n n\u00famero uno para hacer que las aplicaciones del navegador sean m\u00e1s lentas.<\/p>\n<p>Agrupadores y minificadores de JavaScript, como <code>webpack<\/code> y <code>terser<\/code>, realice diferentes optimizaciones para reducir el tama\u00f1o de su aplicaci\u00f3n.  Al analizar su aplicaci\u00f3n en el momento de la compilaci\u00f3n, intentan eliminar tanto como sea posible del c\u00f3digo fuente que no est\u00e1 utilizando.<\/p>\n<p>Por ejemplo, en el fragmento de arriba, su paquete final solo debe incluir el <code>add<\/code> funci\u00f3n ya que este es el \u00fanico s\u00edmbolo de <code>utils.js<\/code> que importas en <code>index.js<\/code>.<\/p>\n<p>Construyamos la aplicaci\u00f3n usando lo siguiente <code>webpack<\/code> configuraci\u00f3n:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const<\/span> path <span class=\"token operator\">=<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'path'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>module<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>entry<span class=\"token operator\">:<\/span> <span class=\"token string\">'index.js'<\/span><span class=\"token punctuation\">,<\/span><br>output<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>filename<span class=\"token operator\">:<\/span> <span class=\"token string\">'out.js'<\/span><span class=\"token punctuation\">,<\/span><br>path<span class=\"token operator\">:<\/span> path<span class=\"token punctuation\">.<\/span><span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span>__dirname<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'dist'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>mode<span class=\"token operator\">:<\/span> <span class=\"token string\">'production'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Aqu\u00ed especificamos que queremos usar optimizaciones del modo de producci\u00f3n y usar <code>index.js<\/code> como punto de entrada.  Despu\u00e9s de invocar <code>webpack<\/code>, si exploramos el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mgechev\/commonjs-example\/blob\/master\/commonjs\/dist\/out.js\">salida<\/a> tama\u00f1o, veremos algo como esto:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\">$ <span class=\"token builtin class-name\">cd<\/span> dist <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">ls<\/span> -lah<br>625K Apr <span class=\"token number\">13<\/span> <span class=\"token number\">13<\/span>:04 out.js<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Darse cuenta de <strong>el paquete es 625KB<\/strong>.  Si miramos la salida, encontraremos todas las funciones de <code>utils.js<\/code> adem\u00e1s de muchos m\u00f3dulos de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/lodash.com\/\"><code>lodash<\/code><\/a><strong>.  Aunque no usamos <code>lodash<\/code> en <code>index.js<\/code> es parte de la salida<\/strong>, lo que agrega mucho peso adicional a nuestros activos de producci\u00f3n.<\/p>\n<p>Ahora cambiemos el formato del m\u00f3dulo a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">M\u00f3dulos ECMAScript<\/a> e intenta de nuevo.  Esta vez, <code>utils.js<\/code> se ver\u00eda as\u00ed:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">add<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">+<\/span> b<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">subtract<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">multiply<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">*<\/span> b<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">divide<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">\/<\/span> b<span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> maxBy <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'lodash-es'<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">max<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">arr<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token function\">maxBy<\/span><span class=\"token punctuation\">(<\/span>arr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Y <code>index.js<\/code> importar\u00eda de <code>utils.js<\/code> utilizando la sintaxis del m\u00f3dulo ECMAScript:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> add <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/utils'<\/span><span class=\"token punctuation\">;<\/span><p>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Usando el mismo <code>webpack<\/code> configuraci\u00f3n, podemos construir nuestra aplicaci\u00f3n y abrir el archivo de salida. <strong>Ahora son 40 bytes<\/strong> con lo siguiente <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mgechev\/commonjs-example\/blob\/master\/esm\/dist\/out.js\">salida<\/a>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">=&gt;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token string\">\"use strict\"<\/span><span class=\"token punctuation\">;<\/span>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token operator\">+<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Observe que el paquete final no contiene ninguna de las funciones de <code>utils.js<\/code> que no usamos, y no hay rastro de <code>lodash<\/code>!  A\u00fan m\u00e1s, <code>terser<\/code> (el minificador de JavaScript que <code>webpack<\/code> usos) en el <code>add<\/code> funcionar en <code>console.log<\/code>.<\/p>\n<p>Una pregunta justa que podr\u00edas hacer es: <strong>\u00bfPor qu\u00e9 el uso de CommonJS hace que el paquete de salida sea casi 16.000 veces m\u00e1s grande?<\/strong>?  Por supuesto, este es un ejemplo de juguete, en realidad, la diferencia de tama\u00f1o puede no ser tan grande, pero lo m\u00e1s probable es que CommonJS agregue un peso significativo a su construcci\u00f3n de producci\u00f3n.<\/p>\n<p><strong>Los m\u00f3dulos CommonJS son m\u00e1s dif\u00edciles de optimizar en el caso general porque son mucho m\u00e1s din\u00e1micos que los m\u00f3dulos ES.  Para asegurarse de que su agrupador y minificador puedan optimizar con \u00e9xito su aplicaci\u00f3n, evite depender de los m\u00f3dulos CommonJS y utilice la sintaxis del m\u00f3dulo ECMAScript en toda su aplicaci\u00f3n.<\/strong><\/p>\n<p>Tenga en cuenta que incluso si est\u00e1 utilizando m\u00f3dulos ECMAScript en <code>index.js<\/code>, si el m\u00f3dulo que est\u00e1 consumiendo es un m\u00f3dulo CommonJS, el tama\u00f1o del paquete de su aplicaci\u00f3n se ver\u00e1 afectado.<\/p>\n<h2 id=\"why-does-commonjs-make-your-app-larger\"><span class=\"ez-toc-section\" id=\"%C2%BFPor-que-CommonJS-agranda-su-aplicacion\"><\/span>\u00bfPor qu\u00e9 CommonJS agranda su aplicaci\u00f3n? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para responder a esta pregunta, veremos el comportamiento de <code>ModuleConcatenationPlugin<\/code> en <code>webpack<\/code> y, despu\u00e9s de eso, discutir la analizabilidad est\u00e1tica.  Este complemento concatena el alcance de todos sus m\u00f3dulos en un solo cierre y permite que su c\u00f3digo tenga un tiempo de ejecuci\u00f3n m\u00e1s r\u00e1pido en el navegador.  Veamos un ejemplo:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">add<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">+<\/span> b<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">subtract<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> add <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> \u2018<span class=\"token punctuation\">.<\/span><span class=\"token operator\">\/<\/span>utils'<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">subtract<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">;<\/span><p>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Arriba, tenemos un m\u00f3dulo ECMAScript, que importamos en <code>index.js<\/code>.  Tambi\u00e9n definimos un <code>subtract<\/code> funci\u00f3n.  Podemos construir el proyecto usando el mismo <code>webpack<\/code> configuraci\u00f3n como arriba, pero esta vez, desactivaremos la minimizaci\u00f3n:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const<\/span> path <span class=\"token operator\">=<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'path'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p>module<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>entry<span class=\"token operator\">:<\/span> <span class=\"token string\">'index.js'<\/span><span class=\"token punctuation\">,<\/span><br>output<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>filename<span class=\"token operator\">:<\/span> <span class=\"token string\">'out.js'<\/span><span class=\"token punctuation\">,<\/span><br>path<span class=\"token operator\">:<\/span> path<span class=\"token punctuation\">.<\/span><span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span>__dirname<span class=\"token punctuation\">,<\/span> <span class=\"token string\">'dist'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>optimization<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>minimize<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>mode<span class=\"token operator\">:<\/span> <span class=\"token string\">'production'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Veamos la salida producida:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span> <br><span class=\"token string\">\"use strict\"<\/span><span class=\"token punctuation\">;<\/span><p><br><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">add<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">+<\/span> b<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">subtract<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">index_subtract<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">;<\/span><span class=\"token operator\">**<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><span class=\"token operator\">**<\/span><\/p><p> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>En el resultado anterior, todas las funciones est\u00e1n dentro del mismo espacio de nombres.  Para evitar colisiones, webpack renombr\u00f3 <code>subtract<\/code> funcionar en <code>index.js<\/code> a <code>index_subtract<\/code>.<\/p>\n<p>Si un minificador procesa el c\u00f3digo fuente anterior, har\u00e1 lo siguiente:<\/p>\n<ul>\n<li>Eliminar las funciones no utilizadas <code>subtract<\/code> y <code>index_subtract<\/code><\/li>\n<li>Eliminar todos los comentarios y los espacios en blanco redundantes<\/li>\n<li>Inline el cuerpo del <code>add<\/code> funci\u00f3n en el <code>console.log<\/code> llamada<\/li>\n<\/ul>\n<p>A menudo, los desarrolladores se refieren a esto <strong>eliminaci\u00f3n de importaciones no utilizadas como sacudidas de \u00e1rboles<\/strong>.  La agitaci\u00f3n de \u00e1rboles solo fue posible porque el paquete web pudo comprender est\u00e1ticamente (en el momento de la compilaci\u00f3n) de qu\u00e9 s\u00edmbolos estamos importando <code>utils.js<\/code> y qu\u00e9 s\u00edmbolos exporta.<\/p>\n<p>Este comportamiento est\u00e1 habilitado de forma predeterminada para <strong>M\u00f3dulos ES<\/strong> porque ellos <strong>son m\u00e1s analizables est\u00e1ticamente<\/strong>, en comparaci\u00f3n con CommonJS.<\/p>\n<p>Veamos exactamente el mismo ejemplo, pero esta vez cambie <code>utils.js<\/code> para usar CommonJS en lugar de los m\u00f3dulos ES:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> maxBy <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'lodash-es'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> fns <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function-variable function\">add<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">+<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">subtract<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">multiply<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">*<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">divide<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">\/<\/span> b<span class=\"token punctuation\">,<\/span><br><span class=\"token function-variable function\">max<\/span><span class=\"token operator\">:<\/span> <span class=\"token parameter\">arr<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token function\">maxBy<\/span><span class=\"token punctuation\">(<\/span>arr<span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><p>Object<span class=\"token punctuation\">.<\/span><span class=\"token function\">keys<\/span><span class=\"token punctuation\">(<\/span>fns<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">fnName<\/span> <span class=\"token operator\">=&gt;<\/span> module<span class=\"token punctuation\">.<\/span>exports<span class=\"token punctuation\">[<\/span>fnName<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> fns<span class=\"token punctuation\">[<\/span>fnName<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Esta peque\u00f1a actualizaci\u00f3n cambiar\u00e1 significativamente la salida.  Como es demasiado largo para insertarlo en esta p\u00e1gina, solo he compartido una peque\u00f1a parte:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token operator\">...<\/span><br><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><p><span class=\"token string\">\"use strict\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">var<\/span> _utils__WEBPACK_IMPORTED_MODULE_0__ <span class=\"token operator\">=<\/span> <span class=\"token function\">__webpack_require__<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">288<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">subtract<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span>_utils__WEBPACK_IMPORTED_MODULE_0__ <span class=\"token punctuation\">.<\/span><span class=\"token constant\">IH<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Observe que el paquete final contiene algunos <code>webpack<\/code> \u00abruntime\u00bb: c\u00f3digo inyectado que es responsable de importar \/ exportar la funcionalidad de los m\u00f3dulos empaquetados.  Esta vez, en lugar de colocar todos los s\u00edmbolos de <code>utils.js<\/code> y <code>index.js<\/code> bajo el mismo espacio de nombres, requerimos din\u00e1micamente, en tiempo de ejecuci\u00f3n, el <code>add<\/code> funci\u00f3n usando <code>__webpack_require__<\/code>.<\/p>\n<p>Esto es necesario porque con CommonJS podemos obtener el nombre de exportaci\u00f3n de una expresi\u00f3n arbitraria.  Por ejemplo, el siguiente c\u00f3digo es una construcci\u00f3n absolutamente v\u00e1lida:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.<\/span>exports<span class=\"token punctuation\">[<\/span>localStorage<span class=\"token punctuation\">.<\/span><span class=\"token function\">getItem<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span> \u2026 <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>No hay forma de que el empaquetador sepa en el tiempo de compilaci\u00f3n cu\u00e1l es el nombre del s\u00edmbolo exportado, ya que esto requiere informaci\u00f3n que solo est\u00e1 disponible en tiempo de ejecuci\u00f3n, en el contexto del navegador del usuario.<\/p>\n<p><strong>De esta manera, el minificador es incapaz de entender qu\u00e9 es exactamente <code>index.js<\/code> utiliza de sus dependencias para que no pueda deshacerse de \u00e9l.<\/strong> Tambi\u00e9n observaremos exactamente el mismo comportamiento para los m\u00f3dulos de terceros. <strong>Si importamos un m\u00f3dulo CommonJS desde <code>node_modules<\/code>, su cadena de herramientas de compilaci\u00f3n no podr\u00e1 optimizarla correctamente.<\/strong><\/p>\n<h2 id=\"tree-shaking-with-commonjs\"><span class=\"ez-toc-section\" id=\"Sacudir-arboles-con-CommonJS\"><\/span>Sacudir \u00e1rboles con CommonJS <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es mucho m\u00e1s dif\u00edcil analizar los m\u00f3dulos CommonJS ya que son din\u00e1micos por definici\u00f3n.  Por ejemplo, la ubicaci\u00f3n de importaci\u00f3n en los m\u00f3dulos ES es siempre un literal de cadena, en comparaci\u00f3n con CommonJS, donde es una expresi\u00f3n.<\/p>\n<p>En algunos casos, si la biblioteca que est\u00e1 usando sigue convenciones espec\u00edficas sobre c\u00f3mo usa CommonJS, es posible eliminar las exportaciones no utilizadas en el momento de la compilaci\u00f3n utilizando un tercero <code>webpack<\/code> <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/indutny\/webpack-common-shake\">enchufar<\/a>.  Aunque este complemento agrega soporte para la agitaci\u00f3n de \u00e1rboles, no cubre todas las diferentes formas en que sus dependencias podr\u00edan usar CommonJS.  Esto significa que no obtiene las mismas garant\u00edas que con los m\u00f3dulos ES.  Adem\u00e1s, agrega un costo adicional como parte de su proceso de construcci\u00f3n adem\u00e1s del valor predeterminado <code>webpack<\/code> comportamiento.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Para asegurarse de que el empaquetador pueda optimizar con \u00e9xito su aplicaci\u00f3n, evite depender de los m\u00f3dulos CommonJS y utilice la sintaxis del m\u00f3dulo ECMAScript en toda su aplicaci\u00f3n.<\/strong><\/p>\n<p>A continuaci\u00f3n, presentamos algunos consejos pr\u00e1cticos para verificar que se encuentra en el camino \u00f3ptimo:<\/p>\n<ul>\n<li>Utilice Rollup.js&#8217;s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/rollup\/plugins\/tree\/master\/packages\/node-resolve\">resoluci\u00f3n de nodejs<\/a><br \/>\nplugin y configure el <code>modulesOnly<\/code> marca para especificar que desea depender solo de los m\u00f3dulos ECMAScript.<\/li>\n<li>Usa el paquete <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mgechev\/is-esm\"><code>is-esm<\/code><\/a>\n<p>para verificar que un paquete npm usa m\u00f3dulos ECMAScript.<\/li>\n<li>Si est\u00e1 usando Angular, de forma predeterminada recibir\u00e1 una advertencia si depende de m\u00f3dulos que no se pueden sacudir en \u00e1rbol.<\/li>\n<\/ul>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Finden Sie heraus, wie sich CommonJS-Module auf die \u00c4nderung Ihres App-Baums auswirken 8. Mai 2020 Aktualisiert am 26. Mai 2020 Vorgestellt in: Times of\u2026<\/p>","protected":false},"author":1,"featured_media":92875,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-92874","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Descubra c\u00f3mo los m\u00f3dulos de CommonJS est\u00e1n impactando el cambio de \u00e1rbol de su aplicaci\u00f3n 8 de mayo de 2020 Actualizado 26 de mayo de 2020 Aparece en:\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes\" \/>\n<meta property=\"og:description\" content=\"Descubra c\u00f3mo los m\u00f3dulos de CommonJS est\u00e1n impactando el cambio de \u00e1rbol de su aplicaci\u00f3n 8 de mayo de 2020 Actualizado 26 de mayo de 2020 Aparece en:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-29T11:41:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-2720326.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes\",\"datePublished\":\"2022-09-29T11:41:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/\"},\"wordCount\":1448,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-2720326.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/\",\"name\":\"C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-2720326.jpg\",\"datePublished\":\"2022-09-29T11:41:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Descubra c\u00f3mo los m\u00f3dulos de CommonJS est\u00e1n impactando el cambio de \u00e1rbol de su aplicaci\u00f3n 8 de mayo de 2020 Actualizado 26 de mayo de 2020 Aparece en:\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/como-commonjs-esta-agrandando-sus-paquetes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-2720326.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-2720326.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-2720326-1542357-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes - R Marketing Digital","description":"Erfahren Sie, wie sich CommonJS-Module auf Ihre \u00c4nderung des Anwendungsbaums auswirken. 8. Mai 2020 Aktualisiert 26. Mai 2020 Erscheint in:","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/","og_locale":"de_DE","og_type":"article","og_title":"C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes","og_description":"Descubra c\u00f3mo los m\u00f3dulos de CommonJS est\u00e1n impactando el cambio de \u00e1rbol de su aplicaci\u00f3n 8 de mayo de 2020 Actualizado 26 de mayo de 2020 Aparece en:","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-29T11:41:21+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-2720326.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes","datePublished":"2022-09-29T11:41:21+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/"},"wordCount":1448,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-2720326.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/","url":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/","name":"C\u00f3mo CommonJS est\u00e1 agrandando sus paquetes - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-2720326.jpg","datePublished":"2022-09-29T11:41:21+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Erfahren Sie, wie sich CommonJS-Module auf Ihre \u00c4nderung des Anwendungsbaums auswirken. 8. Mai 2020 Aktualisiert 26. Mai 2020 Erscheint in:","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/dev\/como-commonjs-esta-agrandando-sus-paquetes\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-2720326.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-2720326.jpg","width":1200,"height":360,"caption":"hero-2720326-1542357-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/92874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=92874"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/92874\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/92875"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=92874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=92874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=92874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}