文档教程前端【免费下载链接】vue-analysis:thumbsup: Vue.js 源码分析项目地址https://gitcode.com/gh_mirrors/vu/vue-analysis点击查看免费下载本篇技术指南围绕当前仓库Vue.js 2.5.17-beta.0 源码中 vue/dist/README.md 所说明的构建文件体系展开系统梳理 Vue 2 发布的 UMD、CommonJS、ES Module 三类格式产物以及 Full含编译器与 Runtime-only仅运行时两条产品线的区别。读完本文你将能根据自己的使用场景CDNscript引入、webpack / Rollup / Browserify 打包、vue-loader 预编译模板正确选择对应构建文件并完成生产环境process.env.NODE_ENV的替换与代码压缩配置。构建文件总览一张表看懂全部产物Vue 2 的官方发布包对应仓库目录 vue/dist按两个维度交叉产出多种构建文件是否包含编译器Full vs Runtime-only×模块格式UMD / CommonJS / ES Module。UMDCommonJSES ModuleFull完整版含编译器vue.jsvue.common.jsvue.esm.jsRuntime-only仅运行时vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.jsFull生产压缩版vue.min.jsRuntime-only生产压缩版vue.runtime.min.js该表格与仓库中 scripts/config.js 的builds配置一一对应web-full-dev产出dist/vue.js、web-full-prod产出dist/vue.min.js、web-runtime-cjs产出dist/vue.runtime.common.js、web-runtime-esm产出dist/vue.runtime.esm.js等每个目标分别指定入口文件、输出格式umd/cjs/es与环境标识development/production。当前仓库 vue/dist 目录下实际存放的文件与上表完全吻合。三个关键术语的精确定义Full完整版同时包含编译器与运行时两部分的构建。Compiler编译器负责把模板字符串编译成 JavaScript 渲染函数render functions的代码。仓库中的实现位于 src/compiler入口 src/compiler/index.js 的baseCompile依次执行parsesrc/compiler/parser/index.js、optimizesrc/compiler/optimizer.js、generatesrc/compiler/codegen/index.js三步最终产出render与staticRenderFns。Runtime运行时负责创建 Vue 实例、渲染与修补patch虚拟 DOM 等所有其余部分——即除编译器之外的一切。核心代码位于 src/core实例化、响应式系统、虚拟 DOM、全局 API与 src/platforms/web/runtime/index.js平台指令、组件与$mount的挂载。Full 与 Runtime-only两种构建的入口差异源码级对比两种构建的差异可以从仓库的两个 web 入口文件直观看出Runtime-only 入口src/platforms/web/entry-runtime.js 极其精简仅一行实质逻辑import Vue from ./runtime/index并导出。Full 构建入口src/platforms/web/entry-runtime-with-compiler.js 则在其基础上做了关键增强缓存并覆写Vue.prototype.$mount当options.render不存在时读取options.template支持#id选择器、DOM 节点、字符串或挂载元素el的outerHTML再通过compileToFunctions来自 src/platforms/web/compiler/index.js 的createCompiler(baseOptions)把模板编译为render函数后挂到实例选项上最后调用原生的$mount。该入口还额外暴露了Vue.compile compileToFunctions供运行时动态编译模板使用。模板编译时机的选择决定了你的取舍如果需要在运行时即时编译模板——例如向template选项传入字符串或直接挂载到一个以元素内 DOM HTML 作为模板的节点——就必须使用含编译器的 Full 构建vue.js/vue.common.js/vue.esm.js。如果使用vue-loaderwebpack 场景或vueifyBrowserify 场景*.vue文件中的模板会在构建期被编译成 JavaScript最终打包产物中并不需要编译器因此应使用 Runtime-only 构建。由于 Runtime-only 构建比对应 Full 构建大约轻 30%官方建议在条件允许时优先使用 Runtime-only若确需使用 Full 构建则必须在打包器中配置别名alias指向完整版文件。打包器别名配置Webpack / Rollup / Browserify 实操Webpack在webpack.config.js的resolve.alias中把vue$带$表示精确匹配vue模块指向 ES Module 完整版若使用 webpack 1则改为 CommonJS 版本vue.common.jsmodule.exports { // ... resolve: { alias: { vue$: vue/dist/vue.esm.js // vue/dist/vue.common.js for webpack 1 } } }Rollup借助rollup-plugin-alias插件将vue模块解析到 ES Module 完整版vue.esm.jsconst alias require(rollup-plugin-alias) rollup({ // ... plugins: [ alias({ vue: vue/dist/vue.esm.js }) ] })Browserify在项目package.json中通过browser字段把vue映射到 CommonJS 完整版vue.common.js{ // ... browser: { vue: vue/dist/vue.common.js } }为什么要这样配置因为 vue/package.json 的pkg.main默认指向dist/vue.runtime.common.js、pkg.module默认指向dist/vue.runtime.esm.js——即打包器默认拿到的是Runtime-only版本。只有当你的应用确实依赖运行时编译如template字符串或Vue.compile时才需要上面的别名覆盖绝大多数配合vue-loader的项目应保持默认的 Runtime-only。包管理字段的默认指向辅助理解从 vue/package.json 可确认这些字段的实际值main: dist/vue.runtime.common.js——老牌打包器Browserify、webpack 1默认解析。module: dist/vue.runtime.esm.js——现代打包器webpack 2、Rollup默认解析以便利用 tree-shaking。unpkg: dist/vue.js、jsdelivr: dist/vue.js——CDN 默认分发Runtime Compiler 的 UMD 完整版这也是通过script标签直接引入时得到的行为。UMD / CommonJS / ES Module三种格式的适用场景UMDvue.js、vue.min.js、vue.runtime.js、vue.runtime.min.js可直接通过script标签在浏览器中使用暴露全局Vue。Unpkg CDN 的默认文件https://unpkg.com/vue就是 Runtime Compiler 的 UMD 构建vue.js——因为 CDN 直接加载的场景无法预先编译模板必须带编译器。若直接以script引入应使用vue.min.js生产压缩版开发调试用vue.js未压缩、含警告提示。CommonJSvue.common.js、vue.runtime.common.js面向 Browserify、webpack 1 这类较老打包器。这些打包器默认加载的文件pkg.main是 Runtime-only 的 CommonJS 构建vue.runtime.common.js。ES Modulevue.esm.js、vue.runtime.esm.js面向 webpack 2、Rollup 等现代打包器天然支持 tree-shaking可将未用到的导出在构建期剔除。这些打包器默认加载的文件pkg.module是 Runtime-only 的 ES Module 构建vue.runtime.esm.js。补充说明vue.esm.browser.js当前仓库 vue/dist 中另有此文件是专为浏览器原生script typemodule场景准备的 ES Module 变体属于发布包中比 README 表格更细化的补充产物。Development 与 Production 模式环境变量替换的完整配置两种模式的处理方式因构建格式而异UMD 构建开发/生产模式是硬编码的——未压缩文件vue.js、vue.runtime.js即开发版压缩文件vue.min.js、vue.runtime.min.js即生产版。从 scripts/config.js 可以看到UMD 构建在构建阶段就通过replace插件把process.env.NODE_ENV替换为写死的development或production字符串。CommonJS 与 ES Module 构建面向打包器仓库不提供对应的压缩版本压缩由你在最终打包环节自行完成同时这两类构建保留了对process.env.NODE_ENV的原始检查运行时根据该变量决定处于何种模式。因此使用 CommonJS / ES Module 构建时必须通过打包器配置把process.env.NODE_ENV替换为字符串字面量。这样做有双重收益一是控制 Vue 的运行模式生产模式下禁用开发警告、启用更严格的分支裁剪二是替换后的字符串字面量让 UglifyJS 之类的压缩器能够彻底删除开发专用的代码块dead code elimination进一步缩小最终文件体积。这种模式分支在源码中随处可见例如 src/platforms/web/runtime/index.js 中process.env.NODE_ENV ! production ...的开发提示逻辑以及 src/platforms/web/entry-runtime-with-compiler.js 中的警告与性能标记分支。WebpackDefinePluginvar webpack require(webpack) module.exports { // ... plugins: [ // ... new webpack.DefinePlugin({ process.env: { NODE_ENV: JSON.stringify(production) } }) ] }Rolluprollup-plugin-replaceconst replace require(rollup-plugin-replace) rollup({ // ... plugins: [ replace({ process.env.NODE_ENV: JSON.stringify(production) }) ] }).then(...)Browserifyenvify 全局转换对打包结果应用全局 envify 转换再用uglifyjs压缩混淆NODE_ENVproduction browserify -g envify -e main.js | uglifyjs -c -m build.js构建流程在仓库中的实际落地纵深参考上述所有产物都通过 vue/scripts/build.js 驱动它读取 vue/scripts/config.js 的getAllBuilds()得到全部构建目标逐个交给 Rollup 打包对以min.js结尾的产物isProd判断再用uglify-js做压缩并输出 gzip 后体积。日常开发与发布可直接使用 vue/package.json 中定义的脚本npm run dev——以web-full-dev目标启动 Rollup 监听模式产出开发版dist/vue.js。npm run build——执行node scripts/build.js产出全部构建文件默认过滤 Weex 相关产物。仓库根目录的 README.md 亦对项目结构src/core 核心逻辑、src/compiler 编译器等目录做了概览说明可作为继续深入源码阅读的索引。选型速查与常见误区你的场景推荐产物理由script直接引入CDN / 本地文件vue.js开发/vue.min.js生产UMD 完整版含运行时编译无需打包器webpack 2 / Rollup vue-loadervue.runtime.esm.js默认无需配置模板构建期已编译省去编译器体积小约 30%webpack 2 / Rollup 运行时编译需求vue.esm.js配置 alias需要template字符串 /Vue.compileBrowserify vueifyvue.runtime.common.js默认同理模板已预编译webpack 1 且需运行时编译vue.common.js配置 alias老打包器不支持 ES Module常见误区提醒一是误以为 CDN 引入的vue.js就是最佳生产选择——实际上若项目通过打包器构建应优先 Runtime-only 以获得更小体积二是只在开发依赖里装了 Vue 而忘记生产模式替换——CommonJS / ES Module 构建不会自动裁剪开发代码必须配置process.env.NODE_ENV替换DefinePlugin / rollup-plugin-replace / envify否则开发警告代码与类型检查分支会被原样打进生产包既拖慢运行也不利于压缩。赞分享文档教程前端【免费下载链接】vue-analysis:thumbsup: Vue.js 源码分析项目地址https://gitcode.com/gh_mirrors/vu/vue-analysis点击查看免费下载相关推荐WebUploader dist 目录全解析构建产物选型、运行时机制与自定义打包指南WebUploader dist 目录全解析构建产物选型、运行时机制与自定义打包指南 WebUploader当前仓库版本 0.1.8 alpha 见 pa前端webpack CoffeeScript 打包实战coffee-loader 配置、模块解析与构建产物深度剖析webpack CoffeeScript 打包实战coffee loader 配置、模块解析与构建产物深度剖析 本文以 webpack 仓库中的 exampl前端构建开发工具Apache ZooKeeper 仓库指南源码结构、构建产物与 Maven 打包发布全解析Apache ZooKeeper 仓库指南源码结构、构建产物与 Maven 打包发布全解析 本篇技术指南以 Apache ZooKeeper 官方仓库根目录的后端配置中心服务注册发现上一篇如何在Windows 10/11上安装Android子系统WSABuilds完整指南下一篇Zephyr RTOS 在 Bouffalo Lab BL618 G0 评估板上的移植与实战Wi-Fi 6 BLE 5.3 RISC-V 开发指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考