解决邮件出现查看全文view entire

拖更了三个月，- -b，因为项目多，太忙了。

在一次调试过程中，邮件的内容特别丰富，发送到GMail的邮件会出现查看全文view entire的样式，点击查看全文之后，自适应的代码全部失效，为PC缩放视图。我们来分析下其中的原因。

查看全文

GMail邮件文档大小限制在102KB

Google了一下，发现了Mailchimp的一篇文章Gmail is clipping my email，其中提及了出现Message clipped的原因是整个email的大小不得超过102KB。
同时这篇文章还罗列了导致文档过大的原因：

1. 同一个主题邮件多次发送会被GMail合并并且折叠，导致出现查看全文。
2. 代码复制带了许多不必要的格式，建议复制纯文字或者在富文本里面编辑。
3. 内容过多，适当减少一些不必要的内容。

当我排除了1、2原因之后，那么大几率就是第三种情况了。

尽量少的使用 <mj-section> 标签

Mjml标签渲染了什么？

我们在 try it live 里看看一组 <mj-section> 和 <mj-column> 会生成多少代码。

以下是mjml:

    <mj-raw>
    <!-- mj-x 标签生成了什么？-->
    <!-- mj-x 开始-->
    </mj-raw>
    <mj-section>
      <mj-column>

      </mj-column>
    </mj-section>
    <mj-raw>
    <!-- mj-x 开始-->
    </mj-raw>

以下是生成的html:

    <!-- mj-x 标签生成了什么？-->
    <!-- mj-x 开始-->
    <!--[if mso | IE]>
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
      >
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->
    <div style="margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
              <!--[if mso | IE]>
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                
        <tr>
      
            <td
               class="" style="vertical-align:top;width:600px;"
            >
          <![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> </table>
              </div>
              <!--[if mso | IE]>
            </td>
          
        </tr>
      
                  </table>
                <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
          </td>
        </tr>
      </table>
      <![endif]-->
    <!-- mj-x 开始-->

由此可见，一组 <mj-section> 和 <mj-column> 标签生成了许多代码，因为mjml要适应许多邮件平台，使用了许多兼容写法。我在编辑的时候，为了语义化各个部分，用了很多<mj-section>标签，所以造成了一封邮件超出了102KB，因此，要尽量少的使用<mj-section>标签

压缩由MJML生成的HTML

如果已经尽可能的少使用<mj-section>标签仍然超过102KB的话，对生成的html进行压缩也是一种方法。我们查看一下MJML官方文档，在输出html的时候有参数--config.minify，将其置为true即可。

    $> mjml input.mjml --config.beautify true --config.minify true

小结

使用MJML时文档过大造成邮件截断的解决方法基本上就是压缩html代码，减少使用<mj-section> 标签，如果仍然过大，那么只能忍痛割爱一些优先级低的内容了哈哈。