井底之蛙爱蹦哒 發表於 2021-6-8 17:33:00

uni-app 微信小程序分包优化

<h2><span style="color: rgba(78, 139, 79, 1)">一、优化方案</span></h2>
<p><strong>1、开启--minimize压缩模式（针对<code>vendor.js</code>过大的情况可以使用运行时压缩代码）</strong></p>
<ul>
<li><code>HBuilderX</code>创建的项目勾选<code>运行--&gt;运行到小程序模拟器--&gt;运行时是否压缩代码</code></li>
<li><code></code><code>cli</code>创建的项目可以在<code>package.json</code>中添加参数<code>--minimize</code>，示例：</li>
</ul>
<div class="cnblogs_code">
<pre>"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"</pre>
</div>
<p><strong>2、让分包的依赖就打包在分包里，别打包到主包里，其实只要添加一个配置及可以了。</strong></p>
<p><strong>打开manifest.json,在“mp-weixin”里添加代码，添加后，记得一定要重新运行项目，才看到效果，单单靠热更新是不行的！！！</strong></p>
<div class="cnblogs_code">
<pre>"optimization"<span style="color: rgba(0, 0, 0, 1)">:{
      </span>"subPackages":<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
   }</span></pre>
</div>
<p><strong>&nbsp;3、分包设置</strong></p>
<h2>一、分包注意事项</h2>
<ul>
<li>微信小程序每个分包的大小是2M，总体积一共不能超过20M。所以需要分包管理文件 。</li>
<li>主包：放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；</li>
<li>分包：是根据pages.json的配置进行划分。</li>
<li>在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。</li>
<li>静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。</li>
<li>js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）</li>
<li>自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息</li>
</ul>
<h2>二、分包使用方法：</h2>
<p>假设支持分包的&nbsp;<code>uni-app</code>&nbsp;目录结构如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">┌─pages               
│├─index
││└─index.vue   
│└─login
│   └─login.vue   
├─pagesA   
│├─static
│└─list
│   └─list.vue
├─pagesB   
│├─static
│└─detail
│   └─detail.vue
├─static            
├─main.js      
├─App.vue         
├─manifest.json
└─pages.json          </span></pre>
</div>
<p>则需要在 pages.json 中填写</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span>"pages"<span style="color: rgba(0, 0, 0, 1)">: [{
      </span>"path": "pages/index/index"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"style"<span style="color: rgba(0, 0, 0, 1)">: { ...}
    }, {
      </span>"path": "pages/login/login"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"style"<span style="color: rgba(0, 0, 0, 1)">: { ...}
    }],
    </span>"subPackages"<span style="color: rgba(0, 0, 0, 1)">: [{
      </span>"root": "pagesA"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"pages"<span style="color: rgba(0, 0, 0, 1)">: [{
            </span>"path": "list/list"<span style="color: rgba(0, 0, 0, 1)">,
            </span>"style"<span style="color: rgba(0, 0, 0, 1)">: { ...}
      }]
    }, {
      </span>"root": "pagesB"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"pages"<span style="color: rgba(0, 0, 0, 1)">: [{
            </span>"path": "detail/detail"<span style="color: rgba(0, 0, 0, 1)">,
            </span>"style"<span style="color: rgba(0, 0, 0, 1)">: { ...}
      }]
    }],
    </span>"preloadRule"<span style="color: rgba(0, 0, 0, 1)">: {
      </span>"pagesA/list/list"<span style="color: rgba(0, 0, 0, 1)">: {
            </span>"network": "all"<span style="color: rgba(0, 0, 0, 1)">,
            </span>"packages": ["__APP__"<span style="color: rgba(0, 0, 0, 1)">]
      },
      </span>"pagesB/detail/detail"<span style="color: rgba(0, 0, 0, 1)">: {
            </span>"network": "all"<span style="color: rgba(0, 0, 0, 1)">,
            </span>"packages": ["pagesA"<span style="color: rgba(0, 0, 0, 1)">]
      }
    }
}</span></pre>
</div>
<h2>三、分包跳转</h2>
<p>在需要点击跳转的地方：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">    uni.navigateTo({
      url: </span>'/myPackageA/pages/piece/piece'<span style="color: rgba(0, 0, 0, 1)">
    })</span></pre>
</div>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/zjianfei/p/14863762.html
頁: [1]
查看完整版本: uni-app 微信小程序分包优化