摘要:因為僅僅包含運行時編譯比完整版少的代碼體積,如果你需要使用完整包也是可以的,你需要調整配置。顯式的改變運行時引用包模塊在引入時做了什么看完了這幾個文件的用途之后我們再來看看引入的時候做了什么帶著這個疑問我們繼續探索。
Vue Runtime Full Analysis - Import Vue Module 回顧系列文章之《VueCLI3上手》
上一節 《Vue運行時全解析 - VueCLI3上手(一)》中介紹了VueCLI3的一些信息,包括以下幾點:
官方主推VueCLI3的原因
CLI3的核心概念
CLI3的安裝
CLI3簡單創建一個項目
Vue ui的使用介紹
使用CLI3按照舊版方式創建項目的方法
安裝插件vuex,router方法
修改項目配置的方式
使用VueCLI3的serve命令 打開一個vue文件
閱讀本節你能學到什么?
查看項目的配置文件的2種方法
vue inspect 命令方式
vue ui 可視化方式
在腳手架項目中引入vue的方式
腳手架項目入口文件的位置
Webpack 引入模塊的機制
vue 編譯后的文件的用途
引入的vue做了哪些前置工作
導出配置文件開始分析之前,我們先把項目配置文件先導出來,以做分析備用,在VueCLI3配置的文檔中可以找到倆中方式找到配置內容:
inspect命令:通過下面命令將項目的默認配置導出到文件中,這里命名為preset-default-vue-cli-3.js
yanyue$ vue inspect > preset-default-vue-cli-3.js
vue ui 的inspect面板,點擊運行可以獲取到。
可以通過 vue ui 啟動可視化配置界面 如下圖,在這里可以看到 task(任務) 面板,task面板有4個task, 選擇 inspect 面板能夠看到 run(運行按鈕) ,點擊后,便能夠查看到輸出的配置信息,在這里查看到的是文本方式查看,由于內容較多,像我這次要分析,需要折疊代碼看到這個配置的整體信息,一般情況,我們不會所有配置都去修改,在這里查閱非常方便,而且運行一次,下次切換過來這個內容還在。
就僅僅配置文件足有1000+行... 從這里看vue也是花了大功夫把各種工具的配置文件都進行了優化整合,并提供統一的修改方式,之后我們會講到如何在項目中修改配置。
項目引入vue的方式要知道項目是怎么引入vue框架的,我們先從最開始了解一下的程序入口main.js文件,因為vue的引入時在這個文件中,那我們先看看這個文件被引入的過程是怎么工作的?
main.jssrc/main.js是整個程序的入口文件,在上面導出的配置文件中我們搜索entry這個關鍵字,可以看到下圖的配置信息:
entry: { app: [ "./src/main.js" ] }
VueCLI3項目的入口文件就是通過該配置字段來定義輸入給 webpack 的,最后通過 HtmlWebpackPlugin 插件將打包好的腳本注入進根據public中的index.html模板生成的新的html文件中, 如下面配置中插件中的template選項:
new HtmlWebpackPlugin({ templateParameters: function () { /* omitted long function */ }, template: "path/to/project-root/public/index.html" })將vue引入項目
第一行代碼
import Vue from "vue"
使用了ES2015的語法將vue的運行時作為依賴模塊引入程序。
我們關注一下模塊細節使用VueCLI3安裝的項目,項目的基本依賴(包括babel, vue等)已經被安裝好了,我們去node_modules目錄中找到vue模塊目錄,從目錄下package.json文件能夠看到如下圖:
從圖中能看到 vue對多種引入方式以不同文件提供支持,包括符合CommonJS模塊規范的 vue.runtime.common.js 、符合ES Module模塊規范的vue.runtime.esm.js和符合UMD模塊規范的 vue.js以及支持TypeScript的類型定義文件index.d.ts。
我們的項目使用webpack打包各個模塊,webpack優先會選取ES模塊方式引入包(原因:webpack中的處理 參考:roollup相關的解釋)
在web環境中,webpack會依據resolve下的mainFields字段中配置的屬性所指定的位置讀取文件,而當前版本的vue項目配置中配置了pkg.module和pkg.main這倆個位置,所以webpack優先讀取了module指向的dist/vue.runtime.esm.js文件,忽略了pkg.main字段指向的位置文件。
編譯后的文件上面說到了vue.runtime.esm.js這個文件被webpack作為vue項目提供的vue模塊引入到我們的項目中,但是從安裝的vue模塊目錄的dist下卻發現了好幾個文件,如下圖:
以下大多參考官方文檔內容,并做了簡單解釋性翻譯:
解釋編譯后的文件Explanation of Build Files
UMD | CommonJS | ES Module | |
---|---|---|---|
Full | vue.js | vue.common.js | vue.esm.js |
Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
Full (production) | vue.min.js | ||
Runtime-only (production) | vue.runtime.min.js |
Full: builds that contains both the compiler and the runtime.
完整版,包含 compiler 和 runtime
Compiler: code that is responsible for compiling template strings into JavaScript render functions.
Compiler : 負責將模板字符串編譯成render函數
注意: 請留意后面會講到的render函數
Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
runtime: 負責創建vue實例, 渲染和調整虛擬DOM等,基本上等效于除去compiler的所有一切。
UMD: UMD builds can be used directly in the browser via a tag. The default file from Unpkg CDN at https://unpkg.com/vue is the Runtime + Compiler UMD build (vue.js).
UMD文件可以使用script標簽直接引入html文件,默認從Unpkg CDN獲取的文件就是 Runtime + Compiler版本的vue.js文件
CommonJS: CommonJS builds are intended for use with older bundlers like browserify or webpack 1. The default file for these bundlers (pkg.main) is the Runtime only CommonJS build (vue.runtime.common.js).
CommonJS版本為了那些還在使用browserify和webpack1的bundler提供的,默認main入口提供了僅包含Runtime的符合CommonJS規范的版本
ES Module: ES module builds are intended for use with modern bundlers like webpack 2 or rollup. The default file for these bundlers (pkg.module) is the Runtime only ES Module build (vue.runtime.esm.js).
ES模塊版本是為了那些現代打包工具像 webpack2+ 或者 rollup,默認module入口提供了僅包含Runtime的符合ES Module規范的版本。
運行時 + 編譯器 與 僅有編譯器 的比較Runtime + Compiler vs. Runtime-only
If you need to compile templates on the fly (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build.
如果你需要在運行時處理之前編譯templates(例如, 有一個template選項,或者掛載到一個元素上,而你又將元素內的DOM元素作為模板來處理,這時候就需要編譯器這部分進行完整編譯。
When using vue-loader or vueify, templates inside *.vue files are compiled into JavaScript at build time. You don"t really need the compiler in the final bundle, and can therefore use the runtime-only build.
如果你打包的時候是用vue-loader 或者 vueify,將`*.vue文件內的templates編譯成JavaScript代碼, 你就不需要compiler, 可以使用 runtime-only版本編譯。
Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you wish to use the full build instead, you need to configure an alias in your bundler.
因為僅僅包含運行時編譯比完整版少30%的代碼體積, 如果你需要使用完整包也是可以的,你需要調整配置。
顯式的改變運行時引用包module.exports = { // ... resolve: { alias: { "vue$": "vue/dist/vue.esm.js" // "vue/dist/vue.common.js" for webpack 1 } } }
const alias = require("rollup-plugin-alias") rollup({ // ... plugins: [ alias({ "vue": "vue/dist/vue.esm.js" }) ] })
Add to your project"s package.json:
{ // ... "browser": { "vue": "vue/dist/vue.common.js" } }vue模塊在引入時做了什么?
看完了這幾個文件的用途之后我們再來看看vue引入的時候做了什么? 帶著這個疑問我們繼續探索。
我們打開vue.runtime.js文件,文件內容有些多,我們先不關注這些細節,我們先看有哪幾大塊功能?
工廠函數,支持不同規范的方式導出文件
類型檢測定義
瀏覽器環境檢測 Browser environment sniffing
虛擬DOM的實現定義
globals MessageChannel
初始化數據方法定義
initState
initProps
initData
initComputed
initMethods
initWatch
initRender
initMixin
初始化調用
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
這一步vue做了很多的前期準備工作,我們在后面章節還會細化...
本節結束這一節我們只關注最基礎的這一塊,下一節,我們將繼續關注細節。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97888.html
摘要:可以譯作運行時過程全面分析和解析,這個全面分析涉及到比較基礎的或者復雜的重要前端概念和中的概念等。注本篇是運行時全解析系列文章的第一篇,首次發表于,友善轉載蟹蟹。附更多內容請參考核心維護者蔣豪群同學的的公開課視頻 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以譯作vue...
摘要:注意此處獲取的數據是更新后的數據,但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新,所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架 介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架 庫和框架的區別 我們所說的前端框架與庫的區別? Library 庫,本質上是一...
摘要:樣式通過標簽包裹,默認是影響全局的,如需定義作用域只在該組件下起作用,需在標簽上加,如要引入外部文件,首先需給項目安裝依賴包,打開,進入項目目錄,輸入回車。 showImg(https://segmentfault.com/img/remote/1460000013235090); (一)安裝node.js 首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/...
摘要:除此之外,你還可以運行打包命令此時之前說的打包生成的文件應該就生成了,或者選擇用瀏覽器打開應該也可以看見和剛剛一樣的結果。而如何創建一個對象是知道,因此開頭引入了,并使用它常見了一個對象,然后這個對象就管理了這一塊區域。 作者:心葉時間:2018-04-25 16:33 本篇最終項目文件Github地址:github.com/paper520/vue.quick/tree/V1 Vue...
閱讀 3344·2021-11-22 15:22
閱讀 2867·2021-10-12 10:12
閱讀 2162·2021-08-21 14:10
閱讀 3831·2021-08-19 11:13
閱讀 2849·2019-08-30 15:43
閱讀 3230·2019-08-29 16:52
閱讀 446·2019-08-29 16:41
閱讀 1438·2019-08-29 12:53