最简微前端解决方案之（MPA + 路由分发）

为什么要做微前端架构

开发一个SPA应用都会面临一个问题，随着功能越来越多，项目主js文件体积越来越大，影响初始加载速度，用户体验越来越差。
想要解决这个问题就需要引入“微前端”解决方案，按照业务需求对应用进行拆分。
选择哪种微前端解决方案，也要根据公司业务的状况进行抉择。
因为我们公司的应用偏工具类，复杂程度不大，主功能模块相对稳定，后续功能追加都是偏运营类页面，所以暂时拆成两个项目（主子），功能应用+运营应用。
同时采用了最简单粗暴的【MPA+路由分发】方案。

使用要点

下面只拿vue项目进行讲解

1、 老项目拆分为两个项目，路由定义作区分

例如：
主项目路由/main/*
子项目路由/action/*

2、 对子项目baseUrl进行修改

baseUrl修改成：域名 + /action/

3、 需要服务端修改nginx

     
server {

 listen 80;

 server\_name 项目域名;

 location / {

 root /服务器项目地址/dist;

 expires -1;

 try\_files $uri $uri/ /index.html;

 }

 location /action/ {

 alias /子项目地址/dist/;

 expires -1;

 try\_files $uri index.html =404;

 }

}

4、内部跳转方式修改

跳转子项目页面采用location.href = 路由

5、进一步的优化（可选方式）

可以把主项目和子项目共用资源通过固定的方式引用，这里需要去修改构建时的配置文件了。

对应的nginx端配置

server {  
    listen 80;  
    server\_name 项目域名;  
  
    location ~\* MP\_verify\_(.\*)\\.txt$ {  
        return 200 $1;  
    }  
  
    location /action/ {  
        alias 子项目路径/dist/;  
        expires -1;  
        try\_files $uri index.html =404;  
    }  
  
    location ~\* /action/(.\*\\.(gif|jpg|jpeg|bmp|png|txt|js|css)$) {  
        alias 子项目路径/dist/$1;  
        expires 30d;  
    }  
  
    location ~.\*\\.(gif|jpg|jpeg|bmp|png|txt|js|css)$ {  
        root 主项目路径/dist;  
        expires 30d;  
        try\_files $uri $uri/ /index.html;  
    }  
  
    location / {  
        root 主项目路径/dist;  
        expires -1;  
        try\_files $uri $uri/ /index.html;  
    }  
  
}

总结

对于实际开发来说，没有完美的解决方案，只有适合自己的解决方案。