小程序本地开发优化 —— 使用live-server托管图片

背景

随着小程序的多次迭代， 小程序体积越来越大， 在字节小程序ide上发现无法正常扫码预览，原因是小程序编译后的体积超过限制。
看了打包产物，发现之前的配置是用 url-loader 把所有图片通过转成 base64 打包到项目中，导致体积过大。

方案：live-server + file-loader + clear-webpack-plugin

• live-server 可以很方便的在本地启动一个小型服务器，托管某个目录的所有文件，可以通过请求路径去访问具体的文件。
• file-loader 修改引用图片的路径为网络地址。
• clean-webpack-plugin 清除图片目录。

首先，把项目中的本地图片都收敛到 src/static 目录，方便生产环境上传 cdn 和本地清除。

我们的目标是把 大于2k 的图片通过 file-loader 更改本地引用路径，可以通过 url-loader 和 file-loader 实现：

const genIp = () => {
  const interfaces = os.networkInterfaces();
  for (const devName in interfaces) {
    const iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
      const alias = iface[i];
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address;
      }
    }
  }
};

const IMG_CONFIG = {
      limit: 2048,
      publicPath: `http://${genIp()}:8080/`,
      name: '[path]/[name].[ext]',
};

// webpack loader配置
 config.module
      .rule('images')
      .test(/.*\.(jpg|png|gif|svg)$/)
      .use('url-loader')
      .loader('url-loader')
      .options(IMG_CONFIG);

通过上面的 webpack loader 配置，项目中引用的图片会被转化：

• 小于 2k 的图片会被打包成 base64
• 大于等于 2k 的图片会被 file-loader 把本地路径 转成 http://${genIp()}:8080/[path]/[name].[ext] 这种形式。

如果不清楚 url-loader 和 file-loader 的同学可以看我之前的这篇文章 从源码分析url-loader和file-loader

修改 package.json 中的 scripts.dev 改成如下：

scripts: {
   "dev": "sh $PWD/scripts/dev.sh",
}

原有的 dev 执行命令写到 scripts/dev.sh 文件中，dev.sh 主要是打印一些提示信息以及启动 live-server 然后执行原有的dev命令：

#!/bin/bash

VUE_APP_VERSION="$(node -e "console.log(require('./package.json').version);")-dev"
PORT=8080

# development 环境下使用本地图片服务
IP_ADDR=$(/sbin/ifconfig -a | grep inet | grep -v 127.0.0.1 | grep -v inet6 | awk '{print $2}' | tr -d "addr:")
echo "图像服务地址将在： http://$IP_ADDR:$PORT 启动"

npx live-server --port=$PORT --quiet --no-browser & npx vue-cli-service uni-build --mode development --watch 

npx live-server --port=$PORT --quiet --no-browser 这句命令是启动 live-server 并且不自动打开浏览器、并且不打文件日志。

当然，这样还不能解决本地小程序包体积过大的问题，因为还没有把图片目录从本地编译产物清除掉。clean-webpack-plugin 这时候就派上用场了，配置 clean-webpack-plugin 清除图片目录：

  if (process.env.NODE_ENV === 'development') {
      config.plugins = [
        ...config.plugins,
        new CleanWebpackPlugin({
          verbose: true,
          cleanAfterEveryBuildPatterns: ['static', 'src'],
          // 防止热更新时资源被删除
          cleanStaleWebpackAssets: false,
        }),
      ];
    }

总结

live-server太方便了！!
本来是打算用 nginx + docker来搭建本地服务的，现在用了 live-server 简单了很多。