基于uni-app的微信小程序之分包
<div style="text-align: right">作者:<font color="brown">故事我忘了<sup>￠</sup></font><br>个人微信公众号:<font color="blue">程序猿的月光宝盒</font><br><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/0c89c806-7e3d-41c5-9d72-84dcecaec490" width="15%"></div><hr><p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>0. 缘由</li><li>1. 关于分包<ul><li>1.0 这是 官方文档</li><li>1.1 注意事项</li></ul></li><li>2.使用方法<ul><li>2.1 首先你得有个uniapp的微信小程序项目</li><li>2.2 在pages同级创建分包</li><li>2.3 <code>pages.json</code>配置</li><li>2.4 然后呢,官网支持了 分包优化</li><li>2.5 怎么跳转呢?</li><li>2.6 然后重启微信开发工具运行</li></ul></li></ul></div><p></p>
<h1 id="0-缘由">0. 缘由</h1>
<p> 最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下</p>
<h1 id="1-关于分包">1. 关于分包</h1>
<p> 好像是规定小程序不能超过2M,一旦超过就需要分包,因为是公司项目,肯定超过,所以就做个演示,权当记录吧</p>
<h2 id="10-这是-官方文档">1.0 这是 官方文档</h2>
<h2 id="11-注意事项">1.1 注意事项</h2>
<blockquote>
<ol>
<li><code>subPackages</code> 里的pages的路径是 <code>root</code> 下的相对路径，不是全路径。</li>
<li>微信小程序每个分包的大小是2M，总体积一共不能超过16M。</li>
<li>百度小程序每个分包的大小是2M，总体积一共不能超过8M。</li>
<li>支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。</li>
<li>QQ小程序每个分包的大小是2M，总体积一共不能超过24M。</li>
<li>分包下支持独立的 <code>static</code> 目录，用来对静态资源进行分包。</li>
<li><code>uni-app</code>内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明</li>
<li>针对<code>vendor.js</code>过大的情况可以使用运行时压缩代码
<ul>
<li><code>HBuilderX</code>创建的项目勾选<code>运行-->运行到小程序模拟器-->运行时是否压缩代码</code></li>
<li><code>cli</code>创建的项目可以在<code>pacakge.json</code>中添加参数<code>--minimize</code>，示例：<code>"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"</code></li>
</ul>
</li>
</ol>
</blockquote>
<h1 id="2使用方法">2.使用方法</h1>
<h2 id="21-首先你得有个uniapp的微信小程序项目">2.1 首先你得有个uniapp的微信小程序项目</h2>
<p> 这里假设你有了,原始项目结构</p>
<p><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/1c712ca3-78bb-4b97-a7d9-9fb531227727" alt="图片" loading="lazy"></p>
<p> 用微信开发工具打开的样子,没有分包之前</p>
<p><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/2ee66c47-9ab3-49ab-a888-269200f7b2e5" alt="图片" loading="lazy"></p>
<h2 id="22-在pages同级创建分包">2.2 在pages同级创建分包</h2>
<p><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/544ad85f-c535-454d-8f53-e79671bf9c00" alt="图片" loading="lazy"></p>
<h2 id="23-pagesjson配置">2.3 <code>pages.json</code>配置</h2>
<p> <img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/7f20f7d5-30fa-437d-9f44-99c91d5a6570" alt="图片" loading="lazy"></p>
<p></p>
<h2 id="24-然后呢官网支持了-分包优化">2.4 然后呢,官网支持了 分包优化</h2>
<blockquote>
<ul>
<li>在对应平台的配置下添加<code>"optimization":{"subPackages":true}</code>开启分包优化</li>
<li>目前只支持<code>mp-weixin</code>、<code>mp-qq</code>、<code>mp-baidu</code>的分包优化</li>
<li>分包优化具体逻辑：
<ul>
<li>静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用</li>
<li>js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）</li>
<li>自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息</li>
</ul>
</li>
</ul>
</blockquote>
<blockquote>
<p><em>我的理解呢就是,既然你分包了功能模块,那相应的静态资源你得分吧,用图片的时候直接是分包下的路径,这才是个完整的分包.</em></p>
</blockquote>
<p>这里我以微信小程序为例,</p>
<p><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/c665ff04-d3e5-4e2c-8ec2-e619bd5a40d7" alt="图片" loading="lazy"></p>
<p><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/bd2c98f8-37eb-41d2-9cfc-05c0714e5852" alt="图片" loading="lazy"></p>
<h2 id="25-怎么跳转呢">2.5 怎么跳转呢?</h2>
<p>在需要点击跳转的地方就好啦</p>
<pre><code class="language-vue"> uni.navigateTo({
url: '/myPackageA/pages/piece/piece'
})
</code></pre>
<h2 id="26-然后重启微信开发工具运行">2.6 然后重启微信开发工具运行</h2>
<p><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/72e214e7-8e7e-4883-9553-4411a8761a9a" alt="图片" loading="lazy"></p>
<p>可以看到已经分包成功</p>
<p>最后上个演示GIF 叭</p>
<p><img src="https://fastly.jsdelivr.net/gh/Klaus-Kin/pic-bed@main/blog-cc/b1aeb11b-ab75-4b45-b7bf-1c4337f2ac7f" alt="图片" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/jsccc520/p/13930358.html
頁:
[1]