WeCOS——微信小程序 COS 瘦身解决方案
baowen022270
7年前
<p style="text-align:start">通过WeCOS，你的小程序项目中的图片资源会自动上传到你的<a href="/misc/goto?guid=4959734889233557350" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">腾讯云对象存储服务（COS）</a>，且WeCOS自动替换代码中图片资源地址的引用为线上地址，移除项目目录中的图片资源，从而减小小程序包大小，为你解决包大小超过限制的烦恼。<a href="/misc/goto?guid=4959734889319822285" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;"><img alt="WeCOS" src="https://simg.open-open.com/show/868e8b49f74e8dda11da96fa9bf18291.jpg"></a> </p> <h2 style="text-align:start">为什么你需要 WeCOS</h2> <pre style="text-align:start"> <code>为了提升小程序体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传失败。 </code></pre> <p style="text-align:start">在开发小程序的过程中，图片资源通常会占用较大空间，很容易超出官方的1MB限制。这时候，使用WeCOS，可以让你在开发过程中不需要关心图片资源占用多少空间的问题，专注于自己的逻辑开发。 </p> <h2 style="text-align:start">准备工作</h2> <ul> <li>进入<a href="/misc/goto?guid=4959734889409453905" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">腾讯云官网</a>，注册帐号</li> <li>登录<a href="/misc/goto?guid=4959734889489357813" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">云对象存储服务（COS）控制台</a>，开通COS服务，创建Bucket</li> <li>安装<a href="/misc/goto?guid=4958867323246690255" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">Node.js</a>环境 </li> </ul> <h2 style="text-align:start">安装</h2> <pre> npm install <span style="color:rgb(167, 29, 93)">-</span>g wecos</pre> <p style="text-align:start"> </p> <h2 style="text-align:start">基本配置</h2> <p style="text-align:start">在你的小程序目录同级下创建<code>wecos.config.json</code>文件</p> <p style="text-align:start"><code>wecos.config.json</code>配置项例子：</p> <pre> { <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>appDir<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>./app<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>cos<span style="color:rgb(24, 54, 145)">"</span></span>: { <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>appid<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>1234567890<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>bucketname<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>wxapp<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>folder<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>/<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="background-color:rgb(181, 42, 29); color:rgb(248, 248, 248)">//资源存放在bucket的哪个目录下</span> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>region<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>wx<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="background-color:rgb(181, 42, 29); color:rgb(248, 248, 248)">//创建bucket时选择的地域简称</span> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>secret_key<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>secret_id<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<span style="color:rgb(24, 54, 145)">"</span></span> } }</pre> <table style="-webkit-text-stroke-width:0px; border-collapse:collapse; border-spacing:0px; box-sizing:border-box; color:rgb(51, 51, 51); display:block; font-family:-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol; font-size:16px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:normal; letter-spacing:normal; margin-bottom:16px; margin-top:0px; orphans:2; overflow:auto; text-align:start; text-indent:0px; text-transform:none; white-space:normal; widows:2; width:888px; word-spacing:0px"> <thead> <tr> <th>配置项</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>appDir</td> <td><strong>[String]</strong></td> <td>默认 <code>./app</code>，小程序项目目录</td> </tr> <tr> <td>cos</td> <td><strong>[Object]</strong></td> <td>必填，填写需要上传到COS对应的配置信息，部分信息可在<a href="/misc/goto?guid=4959734889608307074" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">COS控制台</a>查看</td> </tr> </tbody> </table> <p style="text-align:start"> </p> <h2 style="text-align:start">使用</h2> <p style="text-align:start">在配置文件同级目录下命令行执行</p> <pre> wecos</pre> <p style="text-align:start">注意，执行前需要在该目录下创建<code>wecos.config.json</code>文件</p> <p style="text-align:start"><br> </p> <h2 style="text-align:start">高级配置</h2> <table style="-webkit-text-stroke-width:0px; border-collapse:collapse; border-spacing:0px; box-sizing:border-box; color:rgb(51, 51, 51); display:block; font-family:-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol; font-size:16px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:normal; letter-spacing:normal; margin-bottom:16px; margin-top:0px; orphans:2; overflow:auto; text-align:start; text-indent:0px; text-transform:none; white-space:normal; widows:2; width:888px; word-spacing:0px"> <thead> <tr> <th>配置项</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>backupDir</td> <td><strong>[String]</strong></td> <td>默认 <code>./wecos_backup</code>，备份目录</td> </tr> <tr> <td>uploadFileSuffix</td> <td><strong>[Array]</strong></td> <td>默认 <code>[".jpg", ".png", ".gif"]</code>，图片上传后缀名配置</td> </tr> <tr> <td>uploadFileBlackList</td> <td><strong>[Array]</strong></td> <td>默认 <code>[]</code>，图片资源黑名单</td> </tr> <tr> <td>replaceHost</td> <td><strong>[String]</strong></td> <td>默认 <code>''</code>，把指定域名替换成 targetHost</td> </tr> <tr> <td>targetHost</td> <td><strong>[String]</strong></td> <td>默认 <code>''</code>，使用自定义域名</td> </tr> <tr> <td>compress</td> <td><strong>[Boolean]</strong></td> <td>默认 <code>false</code>，是否开启压缩图片</td> </tr> <tr> <td>watch</td> <td><strong>[Boolean]</strong></td> <td>默认 <code>true</code>，是否开启实时监听项目目录</td> </tr> </tbody> </table> <p>设置备份目录</p> <p style="text-align:start">由于WeCOS在运行时会自动将项目下的图片上传至COS然后删除，这样可能存在丢失源文件的风险，因此我们也提供了备份源文件的功能，每上传一张图片，会在项目同级的某个目录下备份该文件</p> <p style="text-align:start">为了方便使用，可以通过以下配置来修改备份目录名，如果不需要使用该功能，可以设置为空值</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>backupDir<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>./wecos_backup<span style="color:rgb(24, 54, 145)">"</span></span></pre> <p style="text-align:start"> </p> <p>设置图片后缀</p> <p style="text-align:start">有些时候，我们需要限制上传图片的格式，例如只允许<code>jpg</code>格式，可以通过WeCOS提供的图片后缀配置项来定义</p> <p style="text-align:start">WeCOS默认支持<code>jpg,png,gif</code>三种格式，假如你还需要添加其他格式，例如webp，可以在该配置项中添加</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>uploadFileSuffix<span style="color:rgb(24, 54, 145)">"</span></span>: [<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>.jpg<span style="color:rgb(24, 54, 145)">"</span></span>,<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>.png<span style="color:rgb(24, 54, 145)">"</span></span>,<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>.gif<span style="color:rgb(24, 54, 145)">"</span></span>,<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>.webp<span style="color:rgb(24, 54, 145)">"</span></span>]</pre> <p style="text-align:start"> </p> <p>设置图片黑名单</p> <p style="text-align:start">开发过程中，某些特定的图片我们不希望被上传，可以通过WeCOS的黑名单配置来解决这个问题，配置后上传程序会自动忽略掉这些图片</p> <p style="text-align:start">黑名单配置支持目录或具体到文件名的写法</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>uploadFileBlackList<span style="color:rgb(24, 54, 145)">"</span></span>: [<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>./images/logo.png<span style="color:rgb(24, 54, 145)">"</span></span>,<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>./logo/<span style="color:rgb(24, 54, 145)">"</span></span>]</pre> <p style="text-align:start"> </p> <p>自定义域名</p> <p style="text-align:start">如果希望 COS 文件链接使用自定义的域名，可以配置 targetHost 代替默认域名，可以省略：<code>http://</code>：</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>targetHost<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>http://example.com<span style="color:rgb(24, 54, 145)">"</span></span></pre> <p style="text-align:start">如果代码中的图片链接想换一个域名，可以配置 replaceHost targetHost 来实现。</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>replaceHost<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>http://wx-12345678.myqcloud.com<span style="color:rgb(24, 54, 145)">"</span></span>, <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>targetHost<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>https://example.com<span style="color:rgb(24, 54, 145)">"</span></span></pre> <p style="text-align:start"> </p> <p>设置图片黑名单</p> <p style="text-align:start">开发过程中，某些特定的图片我们不希望被上传，可以通过WeCOS的黑名单配置来解决这个问题，配置后上传程序会自动忽略掉这些图片</p> <p style="text-align:start">黑名单配置支持目录或具体到文件名的写法</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>uploadFileBlackList<span style="color:rgb(24, 54, 145)">"</span></span>: [<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>./images/logo.png<span style="color:rgb(24, 54, 145)">"</span></span>,<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>./logo/<span style="color:rgb(24, 54, 145)">"</span></span>]</pre> <p style="text-align:start"> </p> <p>开启图片压缩</p> <p style="text-align:start">图片上传到COS之后虽然大大减轻了程序包的大小，但如果图片自身体积过大，访问速度也会影响到用户体验</p> <p style="text-align:start">令人激动的是，WeCOS在图片上云的基础功能上还额外提供了基于<a href="/misc/goto?guid=4959734889684907338" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">腾讯云万象优图</a>的图片压缩功能。</p> <p style="text-align:start">首先，你需要在<a href="/misc/goto?guid=4959734889768369342" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">万象优图控制台</a>创建 COS的同名bucket</p> <p style="text-align:start">然后，开启该选项，资源将被压缩后上传（注：如果图片已经小到一定程度，压缩后大小可能不会变化）</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>compress<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(0, 134, 179)">true</span></pre> <p style="text-align:start"> </p> <p>设置实时监听</p> <p style="text-align:start">WeCOS默认实时监听项目目录变化，自动处理图片资源，在开发过程中，如果觉得实时监听不方便，或者只需要一次性处理就停止，可以修改该配置，程序将只会执行一次后退出</p> <pre> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">"</span>watch<span style="color:rgb(24, 54, 145)">"</span></span>: <span style="color:rgb(0, 134, 179)">false</span></pre> <p style="text-align:start"><br> </p> <h2 style="text-align:start">高级用法</h2> <p style="text-align:start">如果你除了上述使用命令行来执行的方式外，还想使用其他的方式，例如定制化成自己的模块，我们也提供了直接引用的使用方法满足你个性化的需求</p> <pre> <span style="color:rgb(167, 29, 93)">var</span> wecos <span style="color:rgb(167, 29, 93)">=</span> <span style="color:rgb(0, 134, 179)">require</span>(<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">'</span>wecos<span style="color:rgb(24, 54, 145)">'</span></span>); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">/**</span></span> <span style="color:rgb(150, 152, 150)">* option 可选 [String|Object]</span> <span style="color:rgb(150, 152, 150)">* 传入 String，指定配置文件路径</span> <span style="color:rgb(150, 152, 150)">* 传入 Object，指定配置项</span> <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">*/</span></span> <span style="color:rgb(121, 93, 163)">wecos</span>([option]); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span>指定配置文件路径</span> <span style="color:rgb(121, 93, 163)">wecos</span>(<span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">'</span>./wecos-config.js<span style="color:rgb(24, 54, 145)">'</span></span>); <span style="color:rgb(150, 152, 150)"><span style="color:rgb(150, 152, 150)">//</span>指定配置项</span> <span style="color:rgb(121, 93, 163)">wecos</span>({ appDir<span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(24, 54, 145)"><span style="color:rgb(24, 54, 145)">'</span>./xxx<span style="color:rgb(24, 54, 145)">'</span></span>, cos<span style="color:rgb(167, 29, 93)">:</span> { <span style="color:rgb(167, 29, 93)">...</span> } }); </pre> <p style="text-align:start"><br> </p> <h2 style="text-align:start">相关</h2> <ul> <li> <p><a href="/misc/goto?guid=4959734889852647588" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">WeCOS-UGC-DEMO</a>——小程序用户资源上传COS DEMO</p> </li> <li> <p><a href="/misc/goto?guid=4959734889933493224" style="box-sizing: border-box; background-color: transparent; color: rgb(64, 120, 192); text-decoration: none;">COS-AUTH</a>——COS鉴权服务器DEMO</p> </li> </ul>