小程序vant组件按需加载
2023-05-11 本文已影响0人
aaagu1234
let fs = require('fs');
let path = require('path');
const vantComponentList = [
'button',
'cell',
'col',
'cell-group',
'config-provider',
'icon',
'image',
'layout',
'popup',
'style',
'toast',
'transition',
'calendar',
'checkbox',
'checkbox-group',
'datetime-picker',
'field',
'picker',
'picker-column',
'radio',
'radio-group',
'rate',
'search',
'slider',
'stepper',
'switch',
'uploader',
'action-sheet',
'dialog',
'dropdown-menu',
'dropdown-item',
'loading',
'notify',
'overlay',
'share-sheet',
'swipe-cell',
'circle',
'collapse',
'collapse-item',
'count-down',
'divider',
'empty',
'notice-bar',
'progress',
'skeleton',
'steps',
'sticky',
'tag',
'grid',
'index-bar',
'index-anchor',
'nav-bar',
'sidebar',
'sidebar-item',
'tab',
'tabbar',
'tabbar-item',
'tree-select',
'area',
'card',
'submit-bar',
'goods-action',
'goods-action-button',
'goods-action-icon',
'panel',
];
function walkSync(currentDirPath, callback) {
fs.readdirSync(currentDirPath, { withFileTypes: true }).forEach(function (dirent) {
const filePath = path.join(currentDirPath, dirent.name);
if (dirent.isFile()) {
callback(filePath, dirent);
} else if (dirent.isDirectory()) {
walkSync(filePath, callback);
}
});
}
const useVantList = new Set();
function addUseList(filePath, stat, type = 0) {
if (stat.name === 'index.json') {
if (type === 0) {
const data = fs.readFileSync(filePath, 'utf-8');
data.match(/\@vant\/weapp\/([^\/]*)\/index/g)?.forEach(item => {
const res = item.match(/(?<=weapp\/)[^\/]*(?=\/index)/g)[0];
res && useVantList.add(res);
return;
});
}
if (type === 1) {
const data = fs.readFileSync(filePath, 'utf-8');
data.match(/\.\.\/([^\/]*)\/index/g)?.forEach(item => {
const res = item.match(/(?<=\.\.\/)[^\/]*(?=\/index)/g)[0];
res && useVantList.add(res);
return;
});
}
}
}
const deletePath = `./miniprogram_npm/@vant/weapp/`;
walkSync(path.join(__dirname, './pages'), addUseList);
walkSync(path.join(__dirname, './components'), addUseList);
const appData = require(path.join(__dirname, './app.json'));
appData.subpackages?.forEach(function (item) {
walkSync(path.join(__dirname, `./${item.root}`), addUseList);
});
for (const useVantItem of useVantList) {
if (!fs.existsSync(path.join(__dirname, deletePath + useVantItem))) {
console.error(`缺少${useVantItem } 🚀 ～ 请重新构建`);
process.exit(0);
}
// 遍历Set
walkSync(path.join(__dirname, deletePath + useVantItem), (path, dirent) => {
addUseList(path, dirent, 1);
});
}
console.log('使用的vant组件', useVantList);
function deleteall(path) {
let files = [];
if (fs.existsSync(path)) {
files = fs.readdirSync(path);
files.forEach(function (file, index) {
let curPath = `${path}/${file}`;
if (fs.statSync(curPath).isDirectory()) {
// recurse
deleteall(curPath);
} else {
// delete file
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(path);
}
}
const deleteList = vantComponentList.filter(function (item) {
return !useVantList.has(item);
});
deleteList.forEach(item => {
deleteall(path.join(__dirname, deletePath + item));
});
作用：运行脚本作用是删除miniprogram_npm中未使用到的vant组件。
使用方法： 代码保存成test.js 放到项目的根目录下，打开对应目录的cmd执行: node test.js
需要注意的是，如果添加新组件了就要重新构建npm, 重新执行 node test.js
