背景

隨著小程序的多次迭代， 小程序體積越來越大， 在字節(jié)小程序ide上發(fā)現(xiàn)無法正常掃碼預(yù)覽，原因是小程序編譯后的體積超過限制。
看了打包產(chǎn)物，發(fā)現(xiàn)之前的配置是用 url-loader 把所有圖片通過轉(zhuǎn)成 base64 打包到項(xiàng)目中，導(dǎo)致體積過大。

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

• live-server 可以很方便的在本地啟動(dòng)一個(gè)小型服務(wù)器，托管某個(gè)目錄的所有文件，可以通過請(qǐng)求路徑去訪問具體的文件。
• file-loader 修改引用圖片的路徑為網(wǎng)絡(luò)地址。
• clean-webpack-plugin 清除圖片目錄。

首先，把項(xiàng)目中的本地圖片都收斂到 src/static 目錄，方便生產(chǎn)環(huán)境上傳 cdn 和本地清除。

我們的目標(biāo)是把 大于2k 的圖片通過 file-loader 更改本地引用路徑，可以通過 url-loader 和 file-loader 實(shí)現(xiàn)：

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 配置，項(xiàng)目中引用的圖片會(huì)被轉(zhuǎn)化：

• 小于 2k 的圖片會(huì)被打包成 base64
• 大于等于 2k 的圖片會(huì)被 file-loader 把本地路徑 轉(zhuǎn)成 http://${genIp()}:8080/[path]/[name].[ext] 這種形式。

如果不清楚 url-loader 和 file-loader 的同學(xué)可以看我之前的這篇文章 從源碼分析url-loader和file-loader

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

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

原有的 dev 執(zhí)行命令寫到 scripts/dev.sh 文件中，dev.sh 主要是打印一些提示信息以及啟動(dòng) live-server 然后執(zhí)行原有的dev命令：

#!/bin/bash

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

# development 環(huán)境下使用本地圖片服務(wù)
IP_ADDR=$(/sbin/ifconfig -a | grep inet | grep -v 127.0.0.1 | grep -v inet6 | awk '{print $2}' | tr -d "addr:")
echo "圖像服務(wù)地址將在： http://$IP_ADDR:$PORT 啟動(dòng)"

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 這句命令是啟動(dòng) live-server 并且不自動(dòng)打開瀏覽器、并且不打文件日志。

當(dāng)然，這樣還不能解決本地小程序包體積過大的問題，因?yàn)檫€沒有把圖片目錄從本地編譯產(chǎn)物清除掉。clean-webpack-plugin 這時(shí)候就派上用場(chǎng)了，配置 clean-webpack-plugin 清除圖片目錄：

  if (process.env.NODE_ENV === 'development') {
      config.plugins = [
        ...config.plugins,
        new CleanWebpackPlugin({
          verbose: true,
          cleanAfterEveryBuildPatterns: ['static', 'src'],
          // 防止熱更新時(shí)資源被刪除
          cleanStaleWebpackAssets: false,
        }),
      ];
    }

總結(jié)

live-server太方便了！!
本來是打算用 nginx + docker來搭建本地服務(wù)的，現(xiàn)在用了 live-server 簡(jiǎn)單了很多。