背景
隨著小程序的多次迭代捏顺， 小程序體積越來越大偶芍， 在字節(jié)小程序ide上發(fā)現(xiàn)無法正常掃碼預(yù)覽，原因是小程序編譯后的體積超過限制取胎。
看了打包產(chǎn)物盆耽，發(fā)現(xiàn)之前的配置是用 url-loader 把所有圖片通過轉(zhuǎn)成 base64 打包到項目中，導(dǎo)致體積過大扼菠。
方案：live-server + file-loader + clear-webpack-plugin
- live-server 可以很方便的在本地啟動一個小型服務(wù)器摄杂，托管某個目錄的所有文件，可以通過請求路徑去訪問具體的文件循榆。
- file-loader 修改引用圖片的路徑為網(wǎng)絡(luò)地址析恢。
- clean-webpack-plugin 清除圖片目錄。
首先秧饮，把項目中的本地圖片都收斂到 src/static 目錄映挂，方便生產(chǎn)環(huán)境上傳 cdn 和本地清除。
我們的目標(biāo)是把 大于2k 的圖片通過 file-loader 更改本地引用路徑盗尸，可以通過 url-loader 和 file-loader 實現(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 配置柑船，項目中引用的圖片會被轉(zhuǎn)化：
- 小于 2k 的圖片會被打包成 base64
- 大于等于 2k 的圖片會被
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 主要是打印一些提示信息以及啟動 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 啟動"
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 并且不自動打開瀏覽器鞍时、并且不打文件日志。
當(dāng)然扣蜻，這樣還不能解決本地小程序包體積過大的問題逆巍，因為還沒有把圖片目錄從本地編譯產(chǎn)物清除掉。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,
}),
];
}
總結(jié)
live-server太方便了锐极！!
本來是打算用 nginx + docker來搭建本地服務(wù)的，現(xiàn)在用了 live-server 簡單了很多芳肌。
