关于Taro H5 打包与优化

1.背景介绍

        接手了一个7，8手的项目，没有模块化，项目结构没有分层，所有的东西都是cv，变量命名几乎无法阅读，真真的是司马迁厕所读史记---史上加屎。没办法，作为一个专业人员，我只能在这上面添砖加瓦了。最近领导不是嫌弃首屏加载太慢，于是活这不又来了吗（ps.原来优化过一次，但是嘛，摸鱼人干活永远只干一半）。

2.论我的两次优化

        1.个别用户手机白屏，主包大小优化问题

        这个问题是运营反馈的，你永远也不知道你的用户到底还在用着安卓几（ps.这是个h5套壳的安卓项目，都用taro了直接转rn不好嘛，黑人问号？）。有bug嘛，那肯定是要改的嘛(谁叫他发钱呢）。问题是这样的，用户其实已经进入app了，并且内容已经显示出来了，但是个别页面点击跳转后，app白屏，必须得杀进程后再重新进入，但再次点击还是会白屏（无限循环，就这几个用户，改个屁啊，影响我刷论坛，干）。

        接下来就是定位了，其实这种混合项目或多或少都会因为兼容问题出bug,开始是叫安卓改的，希望把webview改成腾讯内核的，但是安卓说不改，改不了（嫡系就是牛逼！！！）。接下来就只能我这个最底层的来改了。跳转有问题，要么跳转链接错了，要么参数没拿到，因为是部分用户有这问题（妈的，换手机啊），所以我直接从第二个可能性入手了。借遍所有测试机，全无问题（晃点我是吧？），既然用户有问题，那肯定是有问题了，不改点东西，今天都不好意思拿老板钱，开启大对比发，对比没问题的跳转链接和有问题的跳转链接，终于发现了罪魁祸首————URLSearchParams，在路由跳转时这几个页面为了省事直接用这个函数，将这个修改成最原始的写法xxx=xxx就没问题了，推荐一个兼容性网站https://caniuse.com。发散下思维，这个函数都不支持，会不会es6也不支持，为了解决隐患，就去dist目录下搜索了const,还不少，最后发现都是modules里的（不应该啊），改吧。直接贴代码

webpackChain (chain) {
      chain.merge({
        module: {
          rule: {
            es5Loader: {
              include: [
                path.resolve(__dirname, "../node_modules"),
              ],
              test: /\.*[tj]s$/,
              use: [
                {
                  loader: "babel-loader",
                }
              ]
            }
          }
        }
      });

编译ok，测试ok，发版。运营反馈已经没问题了（完美，这周工作量完成，出去抽烟）。小x啊，为什么首次加载这么久？（打包后app.js 2m+,app.css都1m+能不久嘛，但是我不说~~）。接下来就是一些常规的操作，先用webpack-bundle-analyzer分析打包后的结构，发现一个是moment组件打包后还是会带local进去，其实项目不需要使用，所以先去掉moment的local:

chain.plugin('nolocal').use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));

第二个就是开启taro自带的terser，这样app.js就能下到差不多300kb。然后就是将图片压缩，压缩后主包下到了1.3m左右，最后在打包的时候把引入的vsconsole去掉，app.js下到1.1（完美，工作完成）。

        2.第二次优化

        为什又要再优化，因为被投诉了。这次只能从别的地方入手，还是先用webpack-bundle-analyzer分析，发现已经没发再从代码入手了（其实可以的，抽取公共模块commonChunkpulgin,修改项目结构，抽公共组件，减少耦合，但是这些得留到下次投诉了）。最后咋整的，把首屏加载的公共部分抽离，二开启gzip（直接起飞啊兄弟吗），直接上代码

webpackChain (chain) {
      chain.merge({
        plugin: {
          install: {
            plugin: require('compression-webpack-plugin'),
            args: [{
              test: /\.(js|css)/,
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              threshold: 10240,
              minRatio: 0.8
            }]
          }
        },
        .....
     })
}

有一点需要注意的是，taro3.x的直接用5.0.1的插件吧，最新的会报错。

上对比图

 

 开心，这周工作量完成（摸鱼人永不为奴）。