如何為你的微信小程式體積瘦身?

来源:http://www.cnblogs.com/wxlee/archive/2017/01/03/6244204.html
-Advertisement-
Play Games

眾所周知,微信小程式在發佈的時候,對提交的代碼有1M大小的限制!所以,如果你正在寫一個功能稍微複雜一點的小程式,就必須得時刻小心註意你的代碼是不是快觸及這個底線了。 在設計一個小程式之初,我們就需要重點考慮這一點,採取一些方法,來避免太早的遭遇這個問題。 請避免在小程式的UI上使用大圖片,應該儘可能 ...


眾所周知,微信小程式在發佈的時候,對提交的代碼有1M大小的限制!所以,如果你正在寫一個功能稍微複雜一點的小程式,就必須得時刻小心註意你的代碼是不是快觸及這個底線了。

在設計一個小程式之初,我們就需要重點考慮這一點,採取一些方法,來避免太早的遭遇這個問題。

避免使用本地大圖片、大資源文件
  • 請避免在小程式的UI上使用大圖片,應該儘可能的通過顏色樣式來裝點你的小程式

  • 或者,使用小而精緻的小圖標來點綴

  • 如果實在想用大圖片,那請不要將圖片放進小程式的本地代碼中,應該採用從一個遠程URL地址載入圖片的方式

這樣就可以避免把大圖片、大資源文件等打包進小程式的發佈包中去了。

不要讓你的代碼太啰嗦

在JavaScript代碼層面,請審慎的考慮你的代碼邏輯,不要把一個很簡單的邏輯洋洋灑灑的寫了一大堆,請優化和精簡你的代碼。
在視圖層面,儘量避免不必要的組件嵌套,能用一個view做到的,就不要再多套一層view。這對減少代碼尺寸和代碼性能都是有好處的:)

使用工具壓縮優化代碼

在當今HTML5等Web前端項目的開發和發佈中,我們通常會通過使用一些前端工程化工具來處理我們的代碼,比如使用Gulp,結合一些功能插件,如:uglify, cssnano, htmlmin等。使用這些工具,可以讓我們的代碼尺寸小上那麼一大截(約20%~30%)。

而幸運的是,這些工具對小程式開發來說,也完全管用!通過簡單的使用這些工具,就能讓我們的代碼減小那麼多,何樂而不為呢?!

在小程式中,我們大致有這麼幾類可以使用工具進行優化的文件:

    • JSON文件
      我們可以使用jsonminify來壓縮JSON文件,去處JSON文件中多餘的空格

    • JavaScript文件
      使用uglify,對JS代碼進行語法優化和文本壓縮

    • WXML文件
      使用htmlmin,可以對WXML文件中多餘的空格,註釋等進行清理

    • WXSS文件
      可以使用LESS提供的特性,對小程式中的全局WXSS進行合併;使用cssnano對WXSS文件進行清理和壓縮;使用autoprefixer對WXSS添加不同環境下的首碼,達到良好的相容性

    • Image文件
      通過使用imagemin,可以用來優化圖片文件的大小

    • 「H5程式俱樂部」是一個專註微信小程式學習交流,相關外包/招聘需求信息發佈的微信公眾號 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ------------------------------------------------------------------------------------------------... ...
  • 在學習springAOP時,出現如下異常: 無法訪問org.springframework.core.NestedRuntimeException 找不到org.springframework.core.NestedRuntimeException的類文件 原因是:缺少spring-core.jar ...
  • 一、舉例 用控制台程式做一個非常簡單的電腦,實現加減乘除運算即可,那麼,大家自然而然的會寫出如下代碼 二、演繹 1、第一步演繹 ①由於在判斷運算符時,用的是if語句,這意味著每個條件都需要做判斷,相當於電腦做了三次無用功。 ②沒有輸入校驗,例如,除數不能為零的問題等等 就上述兩個問題,做如下修改 ...
  • 下麵將帶領大家一步步學習nodejs,知道怎麼使用nodejs搭建伺服器,響應get/post請求,連接資料庫等。 搭建伺服器頁面輸出hello world 基本語句說明: 1)require 語句,模塊通過它載入。 對於該語句的解析可參見我的文章《require() 源碼解讀》(http://ww ...
  • CSS3的@keyframes,它可以取代許多網頁動畫圖像,Flash動畫,和JAVAScripts。 CSS3的動畫屬性 下麵的表格列出了 @keyframes 規則和所有動畫屬性: 瀏覽器支持 表格中的數字表示支持該屬性的第一個瀏覽器版本號。 緊跟在 -webkit-, -ms- 或 -moz- ...
  • 開始之前,安利一本正在看的書《站在兩個世界的邊緣》,作者程浩,上帝丟給他太多理想,卻忘了給他完成理想的時間。OK,有興趣的可以看一看。 node.js如標題一樣,我也是剛開始接觸,大家一起學習,有不當的地方望指正。node.js是做什麼的,有什麼優勢等問題。首先,它是什麼,它是採用C++語言編寫而成 ...
  • 資料搜索 選擇star最多的兩個 第一個就是用的比較多的jquery.qrcode.js(但不支持中文,不能帶logo)啦,第二個支持ie6+,支持中文,根據第二個源代碼,使得,jquery.qrcode.js,支持中文。 資料搜索 選擇star最多的兩個 第一個就是用的比較多的jquery.qrc ...
  • 在項目開發中我們經常會遇到需要更改input單選和多選樣式的情況,今天就給大家介紹一種簡單改變input單選和多選樣式的辦法。 在這之前先簡單介紹一下:before偽類 :before 選擇器向選定的元素前插入內容。使用content 屬性來指定要插入的內容(content是必須的哦)。 相信這並不 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...