ionic4-webapp-tabs-demo编译部署

首先来尝试一下ionic4的demo弄成webapp看看是啥效果，和有什么小坑

先将安装最新版的ionic,这个看着官方文档就好了

npm install -g ionic

ionic start myApp tabs --type=angular

我当前的ionic版本是4.0.3

下好之后来看看项目目录结构

ng项目的结构，具体哪些代表什么意思，自己去angular那边看(我也不懂0.0)，主要关注的就是app文件夹下面的文件，一眼看上去就发现两个特别的文件，app.component.spec.ts应该是单元测试的，额。这东西看个人吧，我自己是不管这东西的。app-routing.module.ts这东西就是路由的配置，更详细的后面再讲，今天就只是跑跑demo。

然后运行起来看看，ionic serve

编译过程比3慢不少啊。

跑起来界面

看起来还行，底部的tab也是居中，根据不同分辨率做了一定适应，但是这个url是什么鬼。还带{}又带:，看起来也太不爽了，算了，到后面路由章节会详细讲如何去掉并变成正常的/tabs/home这样看起来舒服的url。

好，我们继续，用ionic来弄webapp，吐槽得最多的，估计就是文件大小了。用demo ionic3 build出来的，不用--prod就是4M多快5M，--prod出来的就是1.6M左右，这尼玛访问一下，就没了一两M，真的要报警了。我3的项目弄web是用了--prod编译，然后再放在阿里的oss，是用gzip传输，这样下来也要个四五百K。我是真没辙，只能这样用，那么看看ionic4对这点有没有优化。看看官方文档，找一找，就找到了编译的命令是ionic build --prod --engine browser，好，执行一下看看，经过漫长的等待(编译好慢啊！)，在项目的目录下就有一个www文件夹。我们先来看看www文件夹的大小

www的文件夹详情

这尼玛啊，5.5M，有必要这么大吗，文件夹内一堆js，完全看不懂是干什么用了，然后再看看哪些文件比较大。

svg文件夹的大小

主要大小就是svg，占了接近3M，在实际访问中，这3M应该是不会都用到，所以应该也还好。好，直接把www文件丢到nginx弄成站点访问一下看看。关于nginx的使用自己去百度吧- -！，我这里挂在http://localhost:8080/www/下面，直接访问以下，嗯哼？白屏！！！？wdf，就弄个demo就来坑了吗？用谷歌的开发者工具看看是啥子情况(其实就是右键点检查)

白屏

请求文件404，一看url，我的www被猪吃了是吧。我挂在www/目录下，你特么的请求就把我的www给吃了，你特么用的是绝对路径吗？好吧，静下心，去看看index.html的代码吧

www下面的index.html的代码

咋眼一看，感觉没啥问题啊，js的src都是相对路径啊，看了好几分钟下面的js，再对比了一下ionic3的，感没啥问题啊，就多了一串哈希值而已。然后再详细重头看一下。这个base是什么鬼，居然是在这里定义了路径。。。醉了啊，然后将这里改 （代码居然不能复制黏贴）,保存，再访问一下

修改后的访问http://localhost:8080/www/

好了，能正常访问了，回到正题，首先看，请求的总大小是734k，可以啊，才七百多K，比3的项目小一半啊。但是请求数到达了17个那么多= =！算了，看在体积小了那么多，原谅你了，然后随便点几下看看

切换到contact页面

切换到contact页面发现请求变多了，总大小也变成758kb，玩过3的应该都知道，这里应该是用了懒加载，而且并没有设置为预加载，在3设置预加载就在app.module.ts里面配置一下就好，4的话应该也可以的，这个问题倒不大。

好了，demo是能正常运行了，想一想刚才遇到的坑，就是base标签路径配置，假设我要布多个路径的，那岂不是每次都要修改一下base？那得多麻烦啊，作为一个懒人，我是不愿意做这事情的，而且万一忘记改了，直接布到线上了，那就血崩了。所以对这里进行一下优化，避免出现这情况。

在app/index.html里面进行修改,用 替换掉原来的base(不好复制代码，就简称了)那一行

PS：该方法只适用于使用#的路由方式，否则刷新就会报错

修改的地方

然后重新build一次，再丢nginx里面访问看看，可以正常访问了。这就不用怕布地方，或者每改一次url都要改一次base。(就我自己试了一下，不确保在所有情况下都可以0.0)

总结一下ionic4做webapp的情况:

1、总体积比3小了一半，再用gzip传输，估计能到200K左右(未尝试，有兴趣的同学可以去试试看多大)。

2、base的herf固定写死，不太科学，需要自己处理。

3、www的index.html里面引用的js文件名包含了哈希值，在src里面是不显示，只有build出来才会有引用js的代码，这样要处理静态文件缓存就很僵硬了。静态文件缓存，就比如说index.html已经被浏览器缓存起来了，此时你在线上发布新的版本，那已经缓存起来的就不会请求新的版本的index.html。就存在一个版本不实时的问题，在ionic3我是将js引用都写在另外的一个js文件里面，然后index页面引用这个js文件，后面带个时间戳，这要确保我发布新版本的时候，用户访问的也会是新的版本。那么在4就没办法用这种方式了，目前我想到的方案是在返回index.html的协议头上设置不缓存，以此来解决这个静态缓存的问题。

4、流畅度在demo上试了还不错，感觉还是可以搞搞的，后面会将整个项目改成4，跑起来看看

好了，今天写到这了，写文章还是比写代码耗时间啊，写了我好几个小时，后面在改造过程中遇到一些值得注意的点我都上来写一下，免得大家趟坑。