https://js-recon.io/assets/js/d6bbc567.a2aeb026.js

1"use strict";(self.webpackChunkjs_recon_docs=self.webpackChunkjs_recon_docs||[]).push([[9208],{25814:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>i,contentTitle:()=>o,default:()=>h,frontMatter:()=>t,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"docs/modules/refactor/vue-webpack","title":"Vue.js (webpack) Refactor","description":"The -t vue-webpack technology refactors Vue.js webpack bundle chunks into readable per-module ES files. It handles the webpack 4 and webpack 5 module wrapper formats used by Vue CLI and legacy Vue.js applications.","source":"@site/docs/docs/modules/refactor/vue-webpack.md","sourceDirName":"docs/modules/refactor","slug":"/docs/modules/refactor/vue-webpack","permalink":"/docs/next/docs/modules/refactor/vue-webpack","draft":false,"unlisted":false,"editUrl":"https://github.com/js-recon/js-recon-docs/edit/main/docs/docs/modules/refactor/vue-webpack.md","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"sidebar_position":5},"sidebar":"docsSidebar","previous":{"title":"Next.js (Turbopack) Refactor","permalink":"/docs/next/docs/modules/refactor/next-turbopack"},"next":{"title":"Vue.js (Vite) Refactor","permalink":"/docs/next/docs/modules/refactor/vue-vite"}}');var c=n(74848),d=n(28453);const t={sidebar_position:5},o="Vue.js (webpack) Refactor",i={},l=[{value:"Bundle format",id:"bundle-format",level:2},{value:"Transform passes",id:"transform-passes",level:2},{value:"Pass 1 \u2014 export collection and boilerplate removal",id:"pass-1--export-collection-and-boilerplate-removal",level:3},{value:"Pass 2 \u2014 require hoisting",id:"pass-2--require-hoisting",level:3},{value:"Pass 3 \u2014 inline require replacement",id:"pass-3--inline-require-replacement",level:3},{value:"Passes E / F / G / H \u2014 cleanup",id:"passes-e--f--g--h--cleanup",level:3},{value:"Vue render functions",id:"vue-render-functions",level:2},{value:"Usage",id:"usage",level:2},{value:"Output",id:"output",level:2},{value:"Notes",id:"notes",level:2}];function a(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.R)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(s.header,{children:(0,c.jsx)(s.h1,{id:"vuejs-webpack-refactor",children:"Vue.js (webpack) Refactor"})}),"\n",(0,c.jsxs)(s.p,{children:["The ",(0,c.jsx)(s.code,{children:"-t vue-webpack"})," technology refactors Vue.js webpack bundle chunks into readable per-module ES files. It handles the webpack 4 and webpack 5 module wrapper formats used by Vue CLI and legacy Vue.js applications."]}),"\n",(0,c.jsx)(s.h2,{id:"bundle-format",children:"Bundle format"}),"\n",(0,c.jsxs)(s.p,{children:["Vue webpack bundles store modules inside a ",(0,c.jsx)(s.code,{children:"webpackJsonp"})," push container. Each ",(0,c.jsx)(s.code,{children:".js"})," chunk file has the structure:"]}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-js",children:'(window.webpackJsonp = window.webpackJsonp || []).push([\n    [100],\n    {\n        429: function (t, e, r) {\n            "use strict";\n            r.r(e);\n            // module body\n        },\n        430: function (t, e, r) {\n            // another module\n        },\n    },\n]);\n'})}),"\n",(0,c.jsx)(s.p,{children:"In webpack 5 the same pattern uses arrow functions and a different global name:"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-js",children:'(self.webpackChunkMyApp = self.webpackChunkMyApp || []).push([\n    [0],\n    {\n        429: (t, e, r) => {\n            "use strict";\n            // module body\n        },\n    },\n]);\n'})}),"\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"Parameter order"})," (same for webpack 4 and webpack 5):"]}),"\n",(0,c.jsxs)(s.table,{children:[(0,c.jsx)(s.thead,{children:(0,c.jsxs)(s.tr,{children:[(0,c.jsx)(s.th,{children:"Position"}),(0,c.jsx)(s.th,{children:"Role"})]})}),(0,c.jsxs)(s.tbody,{children:[(0,c.jsxs)(s.tr,{children:[(0,c.jsx)(s.td,{children:(0,c.jsx)(s.code,{children:"params[0]"})}),(0,c.jsxs)(s.td,{children:[(0,c.jsx)(s.code,{children:"module"})," \u2014 module object; ",(0,c.jsx)(s.code,{children:"t.exports = X"})," for CJS exports"]})]}),(0,c.jsxs)(s.tr,{children:[(0,c.jsx)(s.td,{children:(0,c.jsx)(s.code,{children:"params[1]"})}),(0,c.jsxs)(s.td,{children:[(0,c.jsx)(s.code,{children:"exports"})," \u2014 export target for ODP / ",(0,c.jsx)(s.code,{children:"require.d"})]})]}),(0,c.jsxs)(s.tr,{children:[(0,c.jsx)(s.td,{children:(0,c.jsx)(s.code,{children:"params[2]"})}),(0,c.jsxs)(s.td,{children:[(0,c.jsx)(s.code,{children:"require"})," \u2014 import function; ",(0,c.jsx)(s.code,{children:"r(N)"})," imports module N"]})]})]})]}),"\n",(0,c.jsxs)(s.p,{children:["The ",(0,c.jsx)(s.code,{children:"mapped.json"})," produced by the ",(0,c.jsx)(s.code,{children:"map"})," command stores each chunk file's full source (including the push container) in the ",(0,c.jsx)(s.code,{children:"code"})," field. The refactor tool strips the container and processes each module function independently."]}),"\n",(0,c.jsx)(s.h2,{id:"transform-passes",children:"Transform passes"}),"\n",(0,c.jsxs)(s.p,{children:["The same transform passes used for ",(0,c.jsx)(s.a,{href:"/docs/next/docs/modules/refactor/next-webpack",children:"Next.js (webpack)"})," are applied, since the module function format is identical:"]}),"\n",(0,c.jsx)(s.h3,{id:"pass-1--export-collection-and-boilerplate-removal",children:"Pass 1 \u2014 export collection and boilerplate removal"}),"\n",(0,c.jsx)(s.p,{children:"Collects named exports from:"}),"\n",(0,c.jsxs)(s.ul,{children:["\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:'Object.defineProperty(exports, "name", { get: () => localVar })'})," \u2014 ODP named export"]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"require.d(exports, { name: () => localVar, ... })"})," \u2014 webpack ",(0,c.jsx)(s.code,{children:"require.d"})," batch"]}),"\n"]}),"\n",(0,c.jsx)(s.p,{children:"Collects default exports from:"}),"\n",(0,c.jsxs)(s.ul,{children:["\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"module.exports = VALUE"})," \u2014 becomes ",(0,c.jsx)(s.code,{children:"export default VALUE"})]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"module.exports = require(N)"})," \u2014 becomes ",(0,c.jsx)(s.code,{children:"export * from './N.js'"})]}),"\n"]}),"\n",(0,c.jsx)(s.p,{children:"Drops boilerplate:"}),"\n",(0,c.jsxs)(s.ul,{children:["\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:'Object.defineProperty(exports, "__esModule", ...)'})," \u2014 interop marker"]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"require.r(exports)"})," \u2014 ES module marker"]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"module.exports = exports.default"})," \u2014 CJS interop copy-back"]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:'"use strict"'})," directive expressions"]}),"\n"]}),"\n",(0,c.jsx)(s.h3,{id:"pass-2--require-hoisting",children:"Pass 2 \u2014 require hoisting"}),"\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"var x = require(N)"})," declarators are removed and replaced with ",(0,c.jsx)(s.code,{children:"import * as x from './N.js'"})," at the top of the output file."]}),"\n",(0,c.jsx)(s.h3,{id:"pass-3--inline-require-replacement",children:"Pass 3 \u2014 inline require replacement"}),"\n",(0,c.jsxs)(s.p,{children:["Remaining ",(0,c.jsx)(s.code,{children:"require(N)"})," call-sites inside function bodies are replaced with the hoisted namespace identifier."]}),"\n",(0,c.jsx)(s.h3,{id:"passes-e--f--g--h--cleanup",children:"Passes E / F / G / H \u2014 cleanup"}),"\n",(0,c.jsxs)(s.ul,{children:["\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.strong,{children:"E"}),": Collapses Babel ",(0,c.jsx)(s.code,{children:"_slicedToArray"})," / ",(0,c.jsx)(s.code,{children:"_arrayLikeToArray"})," expansions."]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.strong,{children:"F"}),": Recovers JSX from ",(0,c.jsx)(s.code,{children:"jsx(tag, props)"})," / ",(0,c.jsx)(s.code,{children:"jsxs(tag, props)"})," calls."]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.strong,{children:"G"}),": Strips Babel runtime helpers (",(0,c.jsx)(s.code,{children:"_typeof"}),", ",(0,c.jsx)(s.code,{children:"_defineProperty"}),", etc.)."]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.strong,{children:"H"}),": Prunes named import specifiers that are no longer referenced after cleanup. Side-effect imports are always kept."]}),"\n"]}),"\n",(0,c.jsx)(s.h2,{id:"vue-render-functions",children:"Vue render functions"}

1),"\n",(0,c.jsx)(s.p,{children:"Vue 2 components compiled by webpack emit template render functions using the Vue 2 virtual DOM API. These are preserved verbatim in the output:"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-js",children:'// Output (429.js)\nimport * as v from "./3.js";\n\nvar n = Object(v.a)(\n    {},\n    function () {\n        var t = this,\n            e = t._self._c;\n        return e("div", { class: "container" }, [\n            e("h1", [t._v("Page Title")]),\n            e("p", [t._v(t._s(t.message))]),\n        ]);\n    },\n    [],\n    false,\n    null,\n    null,\n    null\n);\n\ne.default = n.exports;\n'})}),"\n",(0,c.jsx)(s.p,{children:"Where:"}),"\n",(0,c.jsxs)(s.ul,{children:["\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"this._c"})," \u2014 Vue's ",(0,c.jsx)(s.code,{children:"createElement"})," function"]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"this._v()"})," \u2014 creates a text VNode"]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:"this._s()"})," \u2014 converts a value to its display string (",(0,c.jsx)(s.code,{children:"toString"}),")"]}),"\n"]}),"\n",(0,c.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-bash",children:"js-recon refactor -m mapped.json -t vue-webpack -o output_refactored\n"})}),"\n",(0,c.jsx)(s.h2,{id:"output",children:"Output"}),"\n",(0,c.jsxs)(s.p,{children:["One ",(0,c.jsx)(s.code,{children:".js"})," file per module ID, formatted with Prettier. Each file uses ES module syntax. Modules whose function body is empty are skipped."]}),"\n",(0,c.jsxs)(s.p,{children:["The webpack runtime chunk (containing the ",(0,c.jsx)(s.code,{children:"webpackJsonp"})," bootstrap itself, no module map) is automatically detected and skipped with a ",(0,c.jsx)(s.code,{children:"[~] No webpack module map found"})," message."]}),"\n",(0,c.jsx)(s.h2,{id:"notes",children:"Notes"}),"\n",(0,c.jsxs)(s.ul,{children:["\n",(0,c.jsxs)(s.li,{children:["The ",(0,c.jsx)(s.code,{children:"mapped.json"})," must be generated from a Vue webpack bundle. Use ",(0,c.jsx)(s.code,{children:"-t vue-vite"})," for Vue 3 + Vite bundles."]}),"\n",(0,c.jsxs)(s.li,{children:["Both webpack 4 (",(0,c.jsx)(s.code,{children:"function(t,e,r){}"}),") and webpack 5 (",(0,c.jsx)(s.code,{children:"(t,e,r)=>{}"}),") module formats are supported."]}),"\n",(0,c.jsx)(s.li,{children:"Vue 3 webpack bundles (rare \u2014 most Vue 3 projects use Vite) are also supported."}),"\n",(0,c.jsxs)(s.li,{children:["The webpack runtime push files (",(0,c.jsx)(s.code,{children:"push.js"}),", ",(0,c.jsx)(s.code,{children:"push_js_1"}),") that set up the ",(0,c.jsx)(s.code,{children:"webpackJsonp"})," array itself contain no module map and are correctly skipped."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,d.R)(),...e.components};return s?(0,c.jsx)(s,{...e,children:(0,c.jsx)(a,{...e})}):a(e)}},28453:(e,s,n)=>{n.d(s,{R:()=>t,x:()=>o});var r=n(96540);const c={},d=r.createContext(c);function t(e){const s=r.useContext(d);return r.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:t(e.components),r.createElement(d.Provider,{value:s},e.children)}}}]);