基于vue和react的spa進行按需加載的實現(xiàn)方法
基于vue和react的spa進行按需加載
由于最近打算將所有的管理系統(tǒng)采用同一套登陸方法,然后在登陸后進行系統(tǒng)的切換選擇,不需要每個系統(tǒng)都去重新登陸一次,所以前端這邊思考將所有的系統(tǒng)用一套spa的應用進行構建,但是各個系統(tǒng)的合并之后,打包后的代碼應該是相當大的,單頁需要一次性加載所有系統(tǒng)的資源,顯得不合實際,所以打算將不同系統(tǒng)的資源進行分離,再選擇后在加載該系統(tǒng)的相應資源。自己發(fā)現(xiàn)這個業(yè)務和每個系統(tǒng)的路由比較類似,因此將系統(tǒng)的配置基于vue-router或者react-router的基礎進行按需加載處理。因此自己了解了一下按需加載的應用和配置方案。
基于該業(yè)務大家有其他解決方案歡迎交流( _O_ )
按需加載
隨著單頁應用的發(fā)展,整個系統(tǒng)的所有功能都集合在一個頁面,該頁面一次性加載所有的資源,隨著系統(tǒng)的不斷擴展,因此所加載的資源會不斷的增大,雖然經過壓縮處理,大大的減小了資源的內容量,但是不能從本質上減小資源內容的增多。
其實我們的模塊對應不同的資源,就類似之前所做的多頁系統(tǒng),不同的頁面加載對應的資源文件,所以可以參考之前的的多頁系統(tǒng)的做法,在單頁系統(tǒng)中根據(jù)不同的模塊加載其對應的資源文件。就是用戶當前需要用什么功能就只加載這個功能對應的代碼,也就是所謂的按需加載。
如何按需加載
在單頁應用做按需加載,一般采用以下原則
- 把整個系統(tǒng)劃分成一個個小功能,再按照功能的相關程度劃分為幾類。
- 把每一類合并為一個Chunk,按需加載對應的Chunk
- 對于首屏看到的內容直接放到入口Chunk中,以降低網頁首次加載資源的個數(shù)
- 對于其他的模塊可以做按需加載。
被分割出去的代碼的加載需要一定的機制去觸發(fā),也就是當用戶即將操作到對應的功能時再去加載。被分割出去的代碼的加載時機需要開發(fā)者根據(jù)自己系統(tǒng)的需求去衡量確定。
因為被分割出去的代碼加載也需要一定的時間,所以可以提前做預加載處理。
import()
在開始下面的案例之前先了解一下import(),這里的import()不同于引入模塊的import xxx from 'xxx',這里的import是指一個動態(tài)加載模塊的函數(shù),傳入的參數(shù)就是相應的模塊,但是import()會返回一個Promise對象,因此可以在import()完成后根據(jù)其狀態(tài)進行處理。
//eg import('/component/details').then(mod=>{ console.log(mod) },error=>{ console.log(error) })
vue按需加載的應用
1.模塊分割
根據(jù)自己系統(tǒng)的情況,個人根據(jù)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 時才去執(zhí)行網絡加載步驟 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( // 異步加載函數(shù),異步地加載 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配置時所帶入的參數(shù)。
解決方法利用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進行按需加載的實現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!