背景

App落地頁(yè)迭代頻繁，且需兼容App與各小App，目前是單向前進(jìn)迭代，會(huì)存在以下問(wèn)題：

• 跳轉(zhuǎn)原生交互；如：某個(gè)落地頁(yè)增加了只有主App的才有的原生功能，小App就無(wú)法投放；
• 歷史版本歸因與復(fù)用，歷史測(cè)試版本的落地頁(yè)都在主鏈上進(jìn)行版本迭代，不利于落地頁(yè)成功、失敗版本的區(qū)分統(tǒng)計(jì)以及沉淀；

所以需實(shí)現(xiàn)一個(gè)快照版本的功能，將構(gòu)建產(chǎn)物以特定的命名規(guī)則給保留下來(lái)，并且支持鏈接訪問(wèn)。可以解決已上問(wèn)題；

• 若主App落地頁(yè)迭代了新的原生功能，小App可以更換投放歷史的鏈接，等小App支持了該原生功能，再恢復(fù)成主鏈接；
• 將每次迭代的鏈接利用管理后臺(tái)維護(hù)，生成完資源后將changelog等信息上傳至后臺(tái)，方便產(chǎn)品管理。

需要解決的問(wèn)題：

• 如何保存頁(yè)面資源
• 只是項(xiàng)目中的幾個(gè)頁(yè)面需要支持這個(gè)功能，如何設(shè)計(jì)這個(gè)配置的開啟與關(guān)閉
• 每次只生成改動(dòng)的頁(yè)面，實(shí)現(xiàn)增量生成。

實(shí)現(xiàn)思路：

在需要配置快照版本的頁(yè)面新增配置文件，構(gòu)建過(guò)程中獲取到這些需要快照版本功能的入口，由于迭代可能只更新到其中的某個(gè)頁(yè)面，還需要做到增量生成，利用hashchunk對(duì)比構(gòu)建上一次與這一次是否一致，若一致，則刪除，若不一致，則保留，最后以當(dāng)前提交的commitid作為目錄將產(chǎn)物保存至dist/目錄中，一同上傳服務(wù)器中。

實(shí)現(xiàn)過(guò)程：

資源命名；因?yàn)槊看蔚紩?huì)生成新的commitid，符合唯一性與可追溯性，適合用于當(dāng)資源目錄。再以特定的目錄名標(biāo)識(shí)此文件夾屬于快照版本；最終命名snaps/{commitid}/pages/{頁(yè)面}.html

文件保存：

在以往項(xiàng)目配置項(xiàng)目打包會(huì)清除dist目錄內(nèi)容，打包完成再傳到服務(wù)器；為了實(shí)現(xiàn)歷史資源保存，需要改一下clean-webpack-plugin的配置，每次只清除上一次的主構(gòu)建產(chǎn)物，而不是整個(gè)dist目錄。

版本快照的webpack配置；主要思路為：每個(gè)頁(yè)面的配置文件新增快照版本標(biāo)識(shí){snapshot: true}, 獲取到這些頁(yè)面的入口文件，傳入webpack的entry配置。

配置產(chǎn)物路徑; 產(chǎn)物文件名filename、產(chǎn)物路徑path、靜態(tài)資源路徑assetModuleFilename、靜態(tài)資源基礎(chǔ)路徑publicPath

filename： [name]/assets/js/main.[chunkhash:8].js, 利用chunkhash做瀏覽器緩存

path：path.join(path.resolve(), dist/snaps/${commit}),以snaps作為父目錄，commit標(biāo)識(shí)每次生成快照版本的版本號(hào)。

assetModuleFilename: 將資源放入對(duì)應(yīng)頁(yè)面的目錄，如dist/snaps/${commit}/assets/images/a.png，再后續(xù)實(shí)現(xiàn)增量構(gòu)建時(shí)才能直接刪除。

    assetModuleFilename: ({ module }) => {
   		let ctx = module.context;
   		let origin = path.resolve("src/assets");
   		let dir = ctx.replace(origin, "").replace(/\\/g, "/")
   		return `${dir}/assets/images/[hash][ext]`
   	}

publicPath: /snaps/{{${COMMIT_ID_PACEHOLDER}}}/, 因?yàn)閣ebpack靜態(tài)資源基礎(chǔ)路徑默認(rèn)配置是/，需要將其指向快照版本目錄對(duì)應(yīng)的版本，確保資源能正常訪問(wèn)。COMMIT_ID_PACEHOLDER是commitid占位符，因?yàn)楹罄m(xù)需要通過(guò)hashchunk對(duì)比產(chǎn)物是否更新，如果這里指定commitid，每次構(gòu)建產(chǎn)物hashchunk都不一樣，就無(wú)法做到增量更新；所以這里需要一個(gè)唯一的字符串，在構(gòu)建完后用腳本去替換真實(shí)的commitid。

實(shí)現(xiàn)增量生成與頁(yè)面信息上傳至管理后臺(tái)：SnapshotPlugin

在plugin的done鉤子，獲取到此次入口的chunkHash（compilation.entrypoints[i].chunks）與上次的hashchunk記錄進(jìn)行對(duì)比，若不相同，則保留文件，若相同，說(shuō)明此次該頁(yè)面無(wú)改動(dòng)，則將改頁(yè)面的資源刪除，則將該頁(yè)面生成的刪除刪除，最后將此次生成的hashchunk值保存下來(lái)，以供下次對(duì)比；對(duì)比文件數(shù)據(jù)結(jié)構(gòu)如下：

{
   "test-page-1": "6e364aeafe957d7929223750b326a4f3",
   "test-page-2": "f586eeef3a1f37672d54b0e5a1d5c0c7",
}

若是需要生成的頁(yè)面，還需要替換掉COMMIT_ID_PACEHOLDER，遍歷此次生成的目錄中的js、css文件，將COMMIT_ID_PACEHOLDER替換成此次的commitid，確保資源能夠訪問(wèn)。

最后通過(guò)調(diào)取接口存儲(chǔ)頁(yè)面鏈接、changelog、標(biāo)題等信息。

關(guān)鍵代碼：

  module.exports = class SnapshotPlugin {
  	constructor({ commitId }) {
  		this.curCommitId = commitId
  	}
  	apply(compiler) {
  		compiler.hooks.done.tap('snapshot-plugin', ({ compilation: { outputOptions, entrypoints } }) => {
  			console.log('快照對(duì)比----snapshot-plugin');
  			const PAGES_ROOT = outputOptions.path
                         // 獲取上次構(gòu)建的chunkhash值
  			const snapHashMap = getLastTimeSnapHash()
                         // 獲取上次沒(méi)有上傳至管理后臺(tái)的頁(yè)面信息數(shù)據(jù)，此次一同發(fā)送
  			const snapPages = getLastTimeSnapPages()
  			let count = entrypoints.size
  			for (const [key, val] of entrypoints) {
  				// key是入口name, val中可以獲取此次的hash值
  				const curChunkHash = (val.chunks.map(item => item.hash).filter(item => item) || []).join(':')
  				// 如果不相同,則說(shuō)明有改動(dòng),將此添加到變更json中
  				if (!snapHashMap[key] || snapHashMap[key] !== curChunkHash) {
  					snapHashMap[key] = curChunkHash
                                   // 獲取頁(yè)面的配置文件，得到頁(yè)面配置信息，如標(biāo)題等
  					const config = getPageConfig([key]) || {}
                                   // 生成管理后臺(tái)數(shù)據(jù)
  					snapPages.push(genSnapConfig(getSnapLink(this.curCommitId, key), config[key].title || key))
  				} else {
  					// 如果相同,則刪除對(duì)應(yīng)的文件目錄,因?yàn)榇藗€(gè)版本沒(méi)有更新,不需要生成快照
  					removeDir(`${PAGES_ROOT}/${key}`)
  					count--
  				}
  			}
  			if (count > 0) {
  				// 替換commitid
  				replaceCommitHolder(PAGES_ROOT, this.curCommitId)
  				// 更新頁(yè)面的chunchHash值
  				setCurrTimeSnapHash(snapHashMap)
  			} else {
  				removeDir(`${outputOptions.path}`)
  			}
  			if (snapPages.length > 0) {
                                // 調(diào)取接口存儲(chǔ)頁(yè)面信息
  				postSnapData(snapPages).then(() => {
  					console.log('postSnapData --- success');
  					// 新增成功，刪除緩存文件
  					removeDir(resolve(PATH_CONFIG.SNAPS_PAGES))
  				}).catch(() => {
  					console.log('postSnapData --- fail');
  					// 新增失敗，則將數(shù)據(jù)存儲(chǔ)只本地
  					setCurrTimeSnapPages(snapPages)
  				})
  			}
  		})
  	}
  }

以上就是vue多頁(yè)面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue多頁(yè)面項(xiàng)目版本快照的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論