背景
随着小程序的多次迭代， 小程序体积越来越大， 在字节小程序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 简单了很多。
