基于vue和react的spa進(jìn)行按需加載的實(shí)現(xiàn)方法

基于vue和react的spa進(jìn)行按需加載

由于最近打算將所有的管理系統(tǒng)采用同一套登陸方法，然后在登陸后進(jìn)行系統(tǒng)的切換選擇，不需要每個(gè)系統(tǒng)都去重新登陸一次，所以前端這邊思考將所有的系統(tǒng)用一套spa的應(yīng)用進(jìn)行構(gòu)建，但是各個(gè)系統(tǒng)的合并之后，打包后的代碼應(yīng)該是相當(dāng)大的，單頁(yè)需要一次性加載所有系統(tǒng)的資源，顯得不合實(shí)際，所以打算將不同系統(tǒng)的資源進(jìn)行分離，再選擇后在加載該系統(tǒng)的相應(yīng)資源。自己發(fā)現(xiàn)這個(gè)業(yè)務(wù)和每個(gè)系統(tǒng)的路由比較類似，因此將系統(tǒng)的配置基于vue-router或者react-router的基礎(chǔ)進(jìn)行按需加載處理。因此自己了解了一下按需加載的應(yīng)用和配置方案。

基于該業(yè)務(wù)大家有其他解決方案歡迎交流（ _O_ ）

按需加載

隨著單頁(yè)應(yīng)用的發(fā)展，整個(gè)系統(tǒng)的所有功能都集合在一個(gè)頁(yè)面，該頁(yè)面一次性加載所有的資源，隨著系統(tǒng)的不斷擴(kuò)展，因此所加載的資源會(huì)不斷的增大，雖然經(jīng)過壓縮處理，大大的減小了資源的內(nèi)容量，但是不能從本質(zhì)上減小資源內(nèi)容的增多。

其實(shí)我們的模塊對(duì)應(yīng)不同的資源，就類似之前所做的多頁(yè)系統(tǒng)，不同的頁(yè)面加載對(duì)應(yīng)的資源文件，所以可以參考之前的的多頁(yè)系統(tǒng)的做法，在單頁(yè)系統(tǒng)中根據(jù)不同的模塊加載其對(duì)應(yīng)的資源文件。就是用戶當(dāng)前需要用什么功能就只加載這個(gè)功能對(duì)應(yīng)的代碼，也就是所謂的按需加載。

如何按需加載

在單頁(yè)應(yīng)用做按需加載，一般采用以下原則

• 把整個(gè)系統(tǒng)劃分成一個(gè)個(gè)小功能，再按照功能的相關(guān)程度劃分為幾類。
• 把每一類合并為一個(gè)Chunk,按需加載對(duì)應(yīng)的Chunk
• 對(duì)于首屏看到的內(nèi)容直接放到入口Chunk中，以降低網(wǎng)頁(yè)首次加載資源的個(gè)數(shù)
• 對(duì)于其他的模塊可以做按需加載。

被分割出去的代碼的加載需要一定的機(jī)制去觸發(fā)，也就是當(dāng)用戶即將操作到對(duì)應(yīng)的功能時(shí)再去加載。被分割出去的代碼的加載時(shí)機(jī)需要開發(fā)者根據(jù)自己系統(tǒng)的需求去衡量確定。
因?yàn)楸环指畛鋈サ拇a加載也需要一定的時(shí)間，所以可以提前做預(yù)加載處理。

import()

在開始下面的案例之前先了解一下import(),這里的import()不同于引入模塊的import xxx from 'xxx',這里的import是指一個(gè)動(dòng)態(tài)加載模塊的函數(shù)，傳入的參數(shù)就是相應(yīng)的模塊，但是import()會(huì)返回一個(gè)Promise對(duì)象，因此可以在import()完成后根據(jù)其狀態(tài)進(jìn)行處理。

//eg
import('/component/details').then(mod=>{
  console.log(mod)
},error=>{
  console.log(error)
})

vue按需加載的應(yīng)用

1.模塊分割

根據(jù)自己系統(tǒng)的情況，個(gè)人根據(jù)vue-router的模塊來(lái)進(jìn)行分割，

//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按需加載應(yīng)用

1,模塊分割

同樣模塊分割可采用react-router進(jìn)行劃分

//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 時(shí)才去執(zhí)行網(wǎng)絡(luò)加載步驟
   load().then(({default: component}) => {
   // 代碼加載成功，獲取到了代碼導(dǎo)出的值，調(diào)用 setState 通知高階組件重新渲染子組件
    this.setState({
     component,
    })
   });
  }
  render() {
   const {component} = this.state || {};
   // component 是 React.Component 類型，需要通過 React.createElement 生產(chǎn)一個(gè)組件實(shí)例
   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傳遞

在按需加載劃分后，按需加載的組件不能接收到傳遞來(lái)的props,因此不能通過this.props.match.params來(lái)獲取router配置時(shí)所帶入的參數(shù)。

解決方法利用react-router中的withRouter

可以在按需加載的組件中進(jìn)行配置處理

//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]

總結(jié)

以上所述是小編給大家介紹的基于vue和react的spa進(jìn)行按需加載的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！