Optimierung der kleinen Paketgröße der Uni-App

Hintergrund

Im Entwicklungsprozess des WeChat-Applets wurden einige Probleme hervorgehoben, da die Geschäftslogik immer größer wurde.

Zunächst haben wir festgestellt, dass die lokale Paketgröße im Entwicklungsmodus 4 m+ erreicht hat. In diesem Fall ist es nicht mehr möglich, echtes Maschinen-Debugging im Entwicklungsmodus zu verwenden.

Zweitens ist das Miniprogramm derzeit nach seiner Erstellung etwa 1,8 Millionen groß. Darüber hinaus müssen in Zukunft noch einige Geschäftsanforderungen entwickelt werden, und die Paketgröße wird definitiv größer sein.

Zu diesem Zeitpunkt möchte ich die kleine Programmpaketgröße optimieren. Lassen Sie mich unten meinen Positionierungsprozess und meine Lösungsideen mitteilen. Obwohl wir Uni-App für die Entwicklung verwenden, hoffe ich, dass es Ihnen helfen kann.

So reduzieren Sie die Paketgröße

Code-Analyse

Analysieren Sie zunächst, wo das Paket groß ist.

Öffnen Sie das lokale Codeverzeichnis, um die Dateigröße anzuzeigen. Es kann festgestellt werden, dass js den Großteil von common/vendor.js und page,components ausmacht.

Im Build-Kompilierungsmodus wurde die Codekomprimierung aktiviert und andere Optimierungsmethoden müssen in Betracht gezogen werden. Zu diesem Zeitpunkt können Sie das Plug-in webpack-bundle-analyzer verwenden. Es kann dabei helfen, zu analysieren, welche JS-Module in Vendor.js enthalten sind und welche Module größer sind, sodass wir den Code weiter optimieren könnenwebpack-bundle-analyzer插件。它可以帮助分析 vendor.js 中都有哪些 js 模块，哪些模块比较大，以便我们进一步优化代码

通过这个插件，发现了下面两个问题。

问题一: uni-app 自定义组件模式编译 tree shaking 无效

如果不是使用 uni-app 开发可以跳过这一段

通过代码分析发现有些模块应该被 tree shaking 但却被打包进来了。基本确定是 tree shaking 没有生效。

同样是 webpack4 + babel7。在不使用 uni-app，直接使用 vue-cli create 项目的前提下，tree shaking 是没有问题的。而使用 uni-app 去新建项目，tree shaking 却无效。

排查 babel 配置时发现是由于 uni-app 在创建项目的时候，设置了 modules: 'commonjs'导致。修改后，demo 的 tree shaking ok。但是回到项目里一编译，又出错了。继续定位发现是 uni-app 自定义组件模式编译问题。目前uni-app已经修复了我提的bug，虽然还未正式发布。

当然你不使用 uni-app 自定义组件模式编译也可以解决，uni-app 还支持template模板模式，但是会有一些开发差异和性能差距，有兴趣可以看下这篇文章

问题二：部分库不支持 tree shaking

有些库(比如 lodash)本身并没有使用 import/export，所以 webpack 并不能对它们 tree shaking。这些库我们可以分情况优化。

首先可以找下网上是否有库对应的 esm 版本可以替代，如 lodash-es。

其次可以从代码分析中看出，如果库的每个模块都在不同文件中，入口文件只是一个统一入口，那么我们就可以通过修改写法按需加载，如

import add from "lodash/add";
import Button from 'ant-design-vue/lib/button';复制代码

我们也可以使用babel-plugin-import

Durch dieses Plug-In wurden die folgenden zwei Probleme entdeckt.

Problem 1: Das Schütteln des Kompilierungsbaums im benutzerdefinierten Komponentenmodus von Uni-App ist ungültig

Wenn Sie nicht mit Uni-App entwickeln, können Sie diesen Abschnitt überspringen

Durch die Code-Analyse wurde festgestellt, dass einige Module baumschüttelnd sein sollten, aber gepackt waren. Es ist grundsätzlich sicher, dass das Baumrütteln keine Wirkung zeigt.

Das Gleiche gilt für Webpack4 + Babel7. Unter der Voraussetzung, dass Uni-App nicht verwendet wird und das Vue-Cli-Erstellungsprojekt direkt verwendet wird, gibt es kein Problem mit dem Baumschütteln. Wenn Sie Uni-App zum Erstellen eines neuen Projekts verwenden, ist das Baumschütteln wirkungslos.

Als ich die Babel-Konfiguration überprüfte, stellte ich fest, dass sie durch die Uni-App-Einstellung „modules: ‚commonjs‘“ beim Erstellen des Projekts verursacht wurde. Nach der Änderung ist das Baumschütteln der Demo in Ordnung. Aber als ich zum Kompilieren zum Projekt zurückkehrte, ging wieder etwas schief. Bei der weiteren Suche stellten wir fest, dass es sich um ein „Kompilierungsproblem im benutzerdefinierten Uni-App-Komponentenmodus“ handelte. Derzeit hat uni-app den von mir erwähnten Fehler behoben, obwohl er noch nicht offiziell veröffentlicht wurde.

Natürlich können Sie das Problem lösen, ohne den benutzerdefinierten Komponentenmodus von uni-app zu verwenden. Uni-app unterstützt auch den Vorlagenvorlagenmodus, aber es gibt einige Entwicklungsunterschiede und Leistungslücken Wenn Sie interessiert sind, können Sie sich diesen Artikel ansehen sich selbst importieren/exportieren, sodass Webpack dies nicht kann. Sie bringen den Baum ins Wanken. Wir können diese Bibliotheken je nach Situation optimieren.

Zunächst können Sie herausfinden, ob es im Internet eine entsprechende ESM-Version der Bibliothek gibt, die ersetzt werden kann, z. B. lodash-es.

Zweitens geht aus der Codeanalyse hervor, dass wir, wenn sich jedes Modul der Bibliothek in einer anderen Datei befindet und die Eintragsdatei nur ein einheitlicher Eintrag ist, ihn bei Bedarf laden können, indem wir die Schreibmethode ändern, z. B.

// package.json"build": "run-s build:dist build:esm build:bundle","build:bundle": "rollup --config","build:dist": "tsc -p tsconfig.build.json","build:esm": "tsc -p tsconfig.esm.json",复制代码

Wir können auch das Plug-in babel-plugin-import verwenden, um das Laden bei Bedarf für diese Bibliotheken einheitlich zu implementieren. Sein Wesen besteht darin, den Ladepfad entsprechend der Konfiguration während der Kompilierung einheitlich zu ändern Sie müssen den Code manuell ändern.

Wenn es am Ende nicht funktioniert, dann akzeptieren Sie es entweder oder schreiben Sie es selbst neu und leisten Sie einen Beitrag zur Community ~

Modulentwicklung standardisierenUm den Ärger zu vermeiden, den Baum nicht schütteln zu können, haben wir auch Bei der Entwicklung von NPM-Modulen müssen bestimmte Spezifikationen befolgt werden, um die Paketgröße des Moduls zu reduzieren.

Unterstützt sowohl das CommonJS- als auch das ES-Modul.

Unser Modul muss sowohl das CommonJS- als auch das ES-Modul unterstützen. Auf diese Weise können wir nicht nur CommonJS-Entwicklungsbenutzer zufriedenstellen, sondern auch Tree Shaking unterstützen.

🎜Wie erreicht man es? Wenn es sich bei Ihrem Code um Typoskript handelt, können Sie am Beispiel von @sentry/browser die cjs- und esm-Standardcodes zur Kompilierungszeit wie folgt kompilieren: 🎜

  "main": "dist/index.js",  "module": "esm/index.js",  "sideEffects": false,复制代码

🎜 Geben Sie dann zwei Einträge und das Flag „Keine Nebenwirkungen“ in package.json an 🎜

"module": "src/index.js",复制代码

🎜 so Wenn Webpack Module analysiert (Analyseregeln), analysiert es bei Bedarf zuerst das ESM-Verzeichnis. Und führen Sie das Schütteln der Bäume durch, wenn keine Nebenwirkungen festgestellt werden. 🎜🎜Wenn Ihr Code selbst es6 ist, können Sie dies auch tun Kompilieren Relevante Dateien werden analysiert, sie werden also nicht kompiliert, komprimiert usw. Zu diesem Zeitpunkt müssen wir uns selbst darum kümmern. Und da Webpack dies nicht beherrscht, kann Tree Shaking nicht unterstützt werden. Es wird daher empfohlen, Komponenten auf diese Weise nicht zu referenzieren. 🎜🎜Untervergabe🎜🎜Die Untervergabe von Miniprogrammen ist ebenfalls eine herkömmliche Optimierungslösung. 🎜

通过分析后，可以将一些较大的页面划分为子包。如果有单页依赖第三方自定义组件，而且第三方组件还挺大，也可以考虑将该页面划分为子包。也因此尽量避免将第三方自定义组件放在 globalStyle，不然没法将它放到子包去。

大图不要打包

小程序中的大图，尽量避免打包进来，应该放到 CDN 通过 url 加载。我们的做法是在开发时加载本地图片，在 CI/CD 环节自动化发布图片，并改写地址。

如何解决真机调试问题

首先还是查看编译后的文件，发现common/vendor.js巨大，足有 1.5M。其次pages和components也有 1.4M，而这其中占了 js 的大小又占了绝大部分。

为什么 js 文件这么大呢？主要是因为在 dev mode 默认并没有压缩，当然也没有 tree shaking。

我的选择是修改编译配置，在 dev mode 压缩 js 代码。本地代码减少到了 2M。预览大小则是减少到了 1.4M。参考配置如下：

// vue.config.js
    configureWebpack: () => {        if (isDev && isMp) {            return {
                optimization: {
                    minimize: true,
                },
            }
        }
    }复制代码

这看上去并不是个好方案，但确实简单有效。也考虑过分包，但分包并不能解决 common/vendor.js 巨大的问题，预览时包还是很大。如果有其它好的办法也欢迎留言~

更多相关免费学习推荐：微信小程序开发

Das obige ist der detaillierte Inhalt vonOptimierung der kleinen Paketgröße der Uni-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!