溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
基于vue和react的spa進行按需加載
由于最近打算將所有的管理系統采用同一套登陸方法，然后在登陸后進行系統的切換選擇，不需要每個系統都去重新登陸一次，所以前端這邊思考將所有的系統用一套spa的應用進行構建，但是各個系統的合并之后，打包后的代碼應該是相當大的，單頁需要一次性加載所有系統的資源，顯得不合實際，所以打算將不同系統的資源進行分離，再選擇后在加載該系統的相應資源。自己發現這個業務和每個系統的路由比較類似，因此將系統的配置基于vue-router或者react-router的基礎進行按需加載處理。因此自己了解了一下按需加載的應用和配置方案。
基于該業務大家有其他解決方案歡迎交流（ _O_ ）
按需加載
隨著單頁應用的發展，整個系統的所有功能都集合在一個頁面，該頁面一次性加載所有的資源，隨著系統的不斷擴展，因此所加載的資源會不斷的增大，雖然經過壓縮處理，大大的減小了資源的內容量，但是不能從本質上減小資源內容的增多。
其實我們的模塊對應不同的資源，就類似之前所做的多頁系統，不同的頁面加載對應的資源文件，所以可以參考之前的的多頁系統的做法，在單頁系統中根據不同的模塊加載其對應的資源文件。就是用戶當前需要用什么功能就只加載這個功能對應的代碼，也就是所謂的按需加載。
如何按需加載
在單頁應用做按需加載，一般采用以下原則
被分割出去的代碼的加載需要一定的機制去觸發，也就是當用戶即將操作到對應的功能時再去加載。被分割出去的代碼的加載時機需要開發者根據自己系統的需求去衡量確定。
因為被分割出去的代碼加載也需要一定的時間，所以可以提前做預加載處理。
import()
在開始下面的案例之前先了解一下import(),這里的import()不同于引入模塊的import xxx from 'xxx',這里的import是指一個動態加載模塊的函數，傳入的參數就是相應的模塊，但是import()會返回一個Promise對象，因此可以在import()完成后根據其狀態進行處理。
//eg
import('/component/details').then(mod=>{
console.log(mod)
},error=>{
console.log(error)
})
vue按需加載的應用
1.模塊分割
根據自己系統的情況，個人根據vue-router的模塊來進行分割，
//roter配置的分割代碼
import Vue from 'vue'
import Router from 'vue-router'
const listnav=()=> import('@/components/listnav')
const adminav=()=> import('@/components/adminav')
Vue.use(Router)
const router = new Router({
routes:[{
path:'/listnav',
name:'listnav',
component:listnav
},
{
path:'/adminav',
name:'adminav',
component:adminav
}
]
})
export default router
2.webpack輸出文件配置
//webpack.base.conf.js
moudle.exports = {
entry:{
app:'./src/main.js'
},
output:{
path:"../dist",
filename:'js/[name].js',
chunkFilename:'js/[name].js'
}
}
react按需加載應用
1,模塊分割
同樣模塊分割可采用react-router進行劃分
//router配置分割代碼
import React, {PureComponent, Component ,createElement} from 'react';
import {HashRouter as Router, Route,Link,withRouter} from 'react-router-dom';
import Home from "../component/home"
function getAsyncComponent(load) {
return class AsyncComponent extends PureComponent {
constructor(props) {
super(props);
}
componentDidMount() {
// 在高階組件 DidMount 時才去執行網絡加載步驟
load().then(({default: component}) => {
// 代碼加載成功，獲取到了代碼導出的值，調用 setState 通知高階組件重新渲染子組件
this.setState({
component,
})
});
}
render() {
const {component} = this.state || {};
// component 是 React.Component 類型，需要通過 React.createElement 生產一個組件實例
return component ? createElement(component) : null;
}
}
}
const Routes = () =>(
<HashRouter>
<Route path="/home/:test" exact component={Home}/>
<Route path='/details/:id' component={getAsyncComponent(
// 異步加載函數，異步地加載 details組件
() => import('../component/details')
)}/>
</HashRouter>
)
export default Routers;
2.webpack輸出文件配置
//webpack.base.config.js
module.exports = {
entry:{
main: "../src/index.js", //入口文件
},
output:{
path:"../dist",//出口文件
filename:"js/[name].js",
chunkFilename:"js/[name].js",
publicPath: ''
}
}
3.按需加載組件中的props傳遞
在按需加載劃分后，按需加載的組件不能接收到傳遞來的props,因此不能通過this.props.match.params來獲取router配置時所帶入的參數。
解決方法利用react-router中的withRouter
可以在按需加載的組件中進行配置處理
//component/details.js
import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
class Details extends Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props)
return (
<div></div>
)
}
}
export default withRouter(Details);
參考鏈接
vue-router路由懶加載 [ https://router.vuejs.org/zh/guide/advanced/lazy-loading.html]
React按需加載[ http://webpack.wuhaolin.cn/4%E4%BC%98%E5%8C%96/4-12%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD.html]
總結
以上所述是小編給大家介紹的基于vue和react的spa進行按需加載的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
