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页面，达到更好的用户体验。