Uniapp打包H5指南

一、準備工作

1、安裝node.js
在打包H5之前，我們需要安裝node.js。在node.js的官網（https://nodejs.org/zh-cn/）下載適合自己操作系統的版本，雙擊安裝即可。

2、創建Uniapp項目
在安裝好node.js後，我們可以使用HbuilderX創建Uniapp項目。打開HbuilderX，點擊”新建”->”項目”->”Uni-app”，輸入項目名稱，選擇創建類型（默認為”Hello World”），點擊”創建”。

3、安裝依賴包
在項目創建好後，我們需要進行依賴包的安裝。打開命令行工具（windows可以使用cmd或者PowerShell，Mac可以使用終端），進入項目目錄，輸入”npm install”並回車。等待依賴包的安裝完成後，我們就可以進行H5的打包了。

二、打包H5

1、修改配置文件
在進行H5打包前，我們需要修改uni-app的打包配置。在項目根目錄下，可以找到一個名為”vue.config.js”的文件。如果沒有找到，可以手動創建一個。在該文件的導出對象中添加如下配置：

module.exports = {
  publicPath: './', // 將路徑修改為相對路徑
  productionSourceMap: false // 關閉生產環境的sourcemap
}

2、運行打包命令
修改好配置文件後，我們可以使用命令行進行H5的打包。在項目目錄下，輸入”npm run build”並回車，等待打包完成。在打包完成後，我們可以在項目目錄下的dist目錄中找到H5的頁面。

三、優化

1、開啟gzip壓縮
通過開啟gzip壓縮可以減小H5頁面的大小，加快頁面的載入速度。在上文中的”vue.config.js”文件中，我們可以添加如下配置：

module.exports = {
  // ...
  configureWebpack: {
    // gzip壓縮
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.css$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

2、使用CDN
當頁面中引入的庫比較大時，可以使用CDN來進行優化。在H5的頁面中，可以將資源鏈接修改為CDN鏈接，從而加快資源載入速度。

四、總結

本文簡單介紹了如何使用uni-app進行H5的打包，並提供了一些優化建議。通過這些簡單的步驟，我們可以輕鬆地將uni-app應用打包為H5頁面，達到更好的用戶體驗。