<noframes id="ffjxp">

    <th id="ffjxp"></th>

    <big id="ffjxp"></big>
      <pre id="ffjxp"></pre>
        <var id="ffjxp"><font id="ffjxp"></font></var>

        成都web前端培訓
        成都達內金融街中心

        成都web前端學習路線:electron-playground系列打包優化之路

        • 時間:2020-12-22 11:55
        • 發布:成都達內
        • 來源:成都達內

        node_modules優化

        electron空項目打包后的dmg體積在75M左右,32位exe文件體積在52M左右,64位的exe體積則為105M左右。

        注:空項目依賴版本為:electron: ^10.1.5 electron-builder: ^22.9.1 系統版本為:macOS Catalina 10.15.6。

        而我們的項目打包后dmg體積為165M,ia32exe也在128M左右,比預期大很多,分析一下包,在release -> 【版本號命名的文件夾】 -> win-ia32-unpacked -> resources 下有個app.asar文件,這其實是個壓縮包,目的是保護代碼隱私,在build中可配置是否需要壓縮為asar包。

        在electron-builder.yml中加入:

        asar: true

        用asar工具包解壓。

        # 安裝

        npm install asar -g

        # 解壓

        asar extract app.asar <解壓后的目錄>

        dist和resources是配置項中指定的需要復制打包的內容,這沒有問題,可是node_modules中的依賴項已經在webpack打包構建時一同打包進了dist下,它不應該在這里,而且electron-builder配置項files中也沒有指定復制此文件夾。帶著這個疑問,查看一下文檔,終于找到了原因,原來files有默認值:

        [

        "**/*",

        "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",

        "!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",

        "!**/node_modules/*.d.ts",

        "!**/node_modules/.bin",

        "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",

        "!.editorconfig",

        "!**/._*",

        "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",

        "!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",

        "!**/{appveyor.yml,.travis.yml,circle.yml}",

        "!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"

        ]

        package.json and **/node_modules/**/* (only production dependencies will be copied) is added to your custom in any case.

        意思是:package.json和node_modules(僅僅生產依賴項會被復制)在任何情況下都會被添加至自定義(應該是files配置項下吧)中。

        那這就很清楚了,我只需要在files中添加"!node_modules"即可,打包后體積是128M,足足小了37M,安裝執行,沒有問題。

        依賴項的問題解決了,但是體積還是沒達預期,查看包內容,果然,圖片!這個永遠也避不開的優化難題。

        圖片優化

        圖片優化在整個項目的優化中是優先級較高的,所謂的圖片優化,其實是體積與質量之間的博弈,因此要想減小包中圖片的體積,是要犧牲一部分圖片質量的,也就是清晰度。做出如下優化:

        首先對gif圖在不影響用戶觀看的前提下做了一定壓縮;

        將一些png(流程圖,logo,線條簡單的)轉為svg;

        將一些截圖png轉為jpg;

        最終將整體包體積dmg減小至102M,ia32exe為80M左右(后續功能更新會有一定出入);

        依賴項,按需加載

        然后檢查一下依賴項的位置和引用,首先對于package.json中依賴項進行排查,查看dependencies和devDependencies中的依賴項有沒有錯位的(開發依賴項寫在了生產依賴項中),由于打包時只打包dependencies中的依賴項,所以在生產環境中用不到的依賴項一律塞至devDependencies。

        然后再檢查引用庫的按需加載,首先想到項目中使用了antd框架。

        官方文檔寫到:antd 默認支持基于 ES modules 的 tree shaking,對于 js 部分,直接引入 import { Button } from 'antd' 就會有按需加載的效果。

        以防萬一,檢查一下,使用webpack-bundle-analyzer可視化插件看一下依賴體積。

        并沒有找到antd,左側抽屜中搜了一下,確定是按需加載。

        雙package.json

        官方重構了生產依賴項,提出雙package.json結構(two package.json)。顧名思義,通過兩個package.json管理依賴項。一個用來管理開發依賴項,一個管理應用程序依賴項,最終打包時只打包應用程序依賴項。

        開發依賴

        此package.json在項目根目錄下,文件中聲明開發依賴和打包腳本;

        應用程序依賴;

        在app文件夾下,聲明應用程序依賴,打包時僅打包此文件中聲明的依賴。所有的元字段應當在此文件聲明(version,name等)。

        版本

        electron版本也會對打包體積有影響,這里用electron^8和10.1.5小試一下

        上一篇:成都web前端培訓:npm的下載與安裝
        下一篇:成都web前端培訓:JS模塊化編程規范require.js

        成都web前端培訓班:React Fiber

        成都web前端培訓機構:教你玩轉CSS的所有字體

        成都web培訓:React+AntdMobile+Axios實現全局Loading提示組件

        成都前端培訓:解決移動端手機瀏覽器軟鍵盤遮擋輸入框問題

        • 關注微信公眾號

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        江西省

        貴州省

        廣西省

        海南省

        校花把腿张开让男生桶视频,欧美va天堂在线电影,欧美中文有码字幕在线播放,九九热线精品视频6在线