這篇文章主要介紹vue多頁(yè)面開(kāi)發(fā)和打包的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供奎文企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為奎文眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
前段時(shí)間做項(xiàng)目,技術(shù)棧是vue+webpack,主要就是官網(wǎng)首頁(yè)加后臺(tái)管理系統(tǒng) 根據(jù)當(dāng)時(shí)情況,分析出三種方案
一個(gè)項(xiàng)目代碼里面嵌兩個(gè)spa應(yīng)用(官網(wǎng)和后臺(tái)系統(tǒng))
分開(kāi)兩套項(xiàng)目源碼
一套項(xiàng)目源碼里面就一個(gè)spa應(yīng)用
思考:
直接否定了一套項(xiàng)目源碼里一個(gè)spa應(yīng)用(ui樣式會(huì)相互覆蓋,如果沒(méi)有代碼規(guī)范后期比較難維護(hù))
兩套源碼的話,后臺(tái)可能開(kāi)兩個(gè)端口,然后需要用nginx反向代理可能比較麻煩,而且前端開(kāi)發(fā)也比較麻煩麻煩,畢竟需要維護(hù)兩個(gè)git倉(cāng)庫(kù),兩套git上線流程,可能會(huì)損耗很多時(shí)間。
對(duì)自己的技術(shù)(盲目)自信,也想嘗嘗鮮,分析出需求也不算很復(fù)雜。選了第一種方案,就是多個(gè)單頁(yè)面應(yīng)用在一套源碼里面
上一張多頁(yè)面的結(jié)構(gòu)圖
下載vue spa模板
npm install vue-cli -g vue init webpack multiple-vue-amazing
改造多頁(yè)面應(yīng)用
npm install glob --save-dev
修改src文件夾下面的目錄結(jié)構(gòu)
在util.js里面加入
/* 這里是添加的部分 ---------------------------- 開(kāi)始 */ // glob是webpack安裝時(shí)依賴(lài)的一個(gè)第三方模塊,還模塊允許你使用 *等符號(hào), 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件 var glob = require('glob') // 頁(yè)面模板 var HtmlWebpackPlugin = require('html-webpack-plugin') // 取得相應(yīng)的頁(yè)面路徑,因?yàn)橹暗呐渲?,所以是src文件夾下的pages文件夾 var PAGE_PATH = path.resolve(__dirname, '../src/pages') // 用于做相應(yīng)的merge處理 var merge = require('webpack-merge') //多入口配置 // 通過(guò)glob模塊讀取pages文件夾下的所有對(duì)應(yīng)文件夾下的js后綴文件,如果該文件存在 // 那么就作為入口處理 exports.entries = function () { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) => { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) map[filename] = filePath }) return map } //多頁(yè)面輸出配置 // 與上面的多頁(yè)面入口配置相同,讀取pages文件夾下的對(duì)應(yīng)的html后綴文件,然后放入數(shù)組中 exports.htmlPlugin = function () { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { // 模板來(lái)源 template: filePath, // 文件名稱(chēng) filename: filename + '.html', // 頁(yè)面模板需要加對(duì)應(yīng)的js腳本,如果不加這行則每個(gè)頁(yè)面都會(huì)引入所有的js腳本 chunks: ['manifest', 'vendor', filename], inject: true } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr } /* 這里是添加的部分 ---------------------------- 結(jié)束 */ webpack.base.conf.js 文件 /* 修改部分 ---------------- 開(kāi)始 */ entry: utils.entries(), /* 修改部分 ---------------- 結(jié)束 */ webpack.dev.conf.js 文件 /* 注釋這個(gè)區(qū)域的文件 ------------- 開(kāi)始 */ // new HtmlWebpackPlugin({ // filename: 'index.html', // template: 'index.html', // inject: true // }), /* 注釋這個(gè)區(qū)域的文件 ------------- 結(jié)束 */ new FriendlyErrorsPlugin() /* 添加 .concat(utils.htmlPlugin()) ------------------ */ ].concat(utils.htmlPlugin()) webpack.prod.conf.js 文件 /* 注釋這個(gè)區(qū)域的內(nèi)容 ---------------------- 開(kāi)始 */ // new HtmlWebpackPlugin({ // filename: config.build.index, // template: 'index.html', // inject: true, // minify: { // removeComments: true, // collapseWhitespace: true, // removeAttributeQuotes: true // // more options: // // https://github.com/kangax/html-minifier#options-quick-reference // }, // // necessary to consistently work with multiple chunks via CommonsChunkPlugin // chunksSortMode: 'dependency' // }), /* 注釋這個(gè)區(qū)域的內(nèi)容 ---------------------- 結(jié)束 */ // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) /* 該位置添加 .concat(utils.htmlPlugin()) ------------------- */ ].concat(utils.htmlPlugin())
引入第三方ui庫(kù)
npm install element-ui bootstrap-vue --save
分別在不同的頁(yè)面引入不同的ui index.js
import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue)
admin.js
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
上面多頁(yè)面的配置是參考網(wǎng)上的,而且網(wǎng)上的思路大都很相似,核心就是改多個(gè)entry,配置完成了之后,開(kāi)發(fā)的時(shí)候也是發(fā)現(xiàn)不了問(wèn)題的,然后大概就開(kāi)發(fā)了一個(gè)月,開(kāi)發(fā)完之后對(duì)官網(wǎng)進(jìn)行性能分析時(shí)發(fā)現(xiàn),webpack打包的vendor.js網(wǎng)絡(luò)加載時(shí)間特別長(zhǎng),導(dǎo)致首屏的白屏?xí)r間非常長(zhǎng),最終通過(guò)-webpack-bundle-analyzer分析得到了結(jié)論
npm run build --report
你會(huì)發(fā)現(xiàn)vendor.js包含了index.html和admin.html的共同部分,所以這個(gè)vendor包注定會(huì)很大很冗余
解決思路
既然是vendor過(guò)大引起加載速度慢,那就分離這個(gè)vendor就好了。我是這樣想的,把各個(gè)頁(yè)面中都使用到的第三方代碼提取至vendor.js中,然后各個(gè)頁(yè)面中用到的第三方代碼再打包成各自的vendor-x.js,例如現(xiàn)有頁(yè)面index.html、admin.html,則最終會(huì)打包出vendor.js、vendor-index.js、vendor-admin.js。
webpack.prod.conf.js 文件
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor-admin', chunks: ['vendor'], minChunks: function (module, count) { return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 && module.resource.indexOf('element-ui') != -1 ) } }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor-index', chunks: ['vendor'], minChunks: function (module, count) { return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 && module.resource.indexOf('bootstrap-vue') != -1 ) } }),
再次分析,一切都很ok,vendor.js被分離成了vendor.js、vendor-index、vendor-admin.js
本來(lái)以為解決了CommonsChunkPlugin的分離vendor.js的問(wèn)題,就可以了,然后打包出來(lái)發(fā)現(xiàn)index.html和admin.html都少了一個(gè)引入(各自對(duì)應(yīng)的那個(gè)vendor-xx.js)
解決方案
這個(gè)問(wèn)題其實(shí)就是HtmlWebpackPlugin的問(wèn)題 把原來(lái)的 chunksSortMode: 'dependency'改成自定義函數(shù)的配置,如下
util.js文件
chunksSortMode: function (chunk1, chunk2) { var order1 = chunks.indexOf(chunk1.names[0]) var order2 = chunks.indexOf(chunk2.names[0]) return order1 - order2 },
最終實(shí)現(xiàn)
每個(gè)頁(yè)面加載各自的chunk
每個(gè)頁(yè)面有不同的參數(shù)
每個(gè)頁(yè)面能共享公共chunk
瀏覽器緩存,性能更好
如果還嫌慢的話,開(kāi)啟gzip
感想
大功告成了,雖然配置看起來(lái)很簡(jiǎn)單,不過(guò)我當(dāng)時(shí)開(kāi)發(fā)的時(shí)候,思考了很久,所以假如你CommonsChunkPlugin和HtmlWebpackPlugin不熟悉或者只會(huì)用別人第三方的配置表,估計(jì)會(huì)踩大坑,比如說(shuō),CommonsChunkPlugin不指定chunks,默認(rèn)是什么?minChunks大多數(shù)人只會(huì)寫(xiě)一個(gè)數(shù)值,然而自定義一個(gè)函數(shù)的寫(xiě)法其實(shí)才是最強(qiáng)大的,根據(jù)我個(gè)人的經(jīng)驗(yàn)chunks結(jié)合minChunks自定義函數(shù)的寫(xiě)法,能解決幾乎所有CommonsChunkPlugin靈異的事件。
以上是“vue多頁(yè)面開(kāi)發(fā)和打包的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞名稱(chēng):vue多頁(yè)面開(kāi)發(fā)和打包的示例分析
文章位置:http://www.muchs.cn/article30/piegso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、自適應(yīng)網(wǎng)站、用戶(hù)體驗(yàn)、品牌網(wǎng)站制作、Google、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)