解决tailwind配置spacing后，导致项目启动变慢的问题

最近接手一个项目时，发现项目启动得40多秒，同事电脑配置有点低，启动得2分钟了，，对我这种急性子来说，着实太慢。

优化前启动时间：40s

优化后启动时间：27s

研究一段时间后发现，tailwind.config.js内配置的spacing项导致项目启动慢了13秒。

tailwind.config.js：

const {inset,spacing,textColor,fontSize,lineHeight} = require('./tailwind.theme.js')

module.exports = {  
        purge: [],  
        darkMode: false, // or 'media' or 'class'  
        theme: {    
            textColor,    
            fontSize,    
            lineHeight,    
            container: {      
                center: true,      
                screens: {        
                    sm: '984px',        
                    md: '984px',        
                    lg: '984px',        
                    xl: '1200px',        
                    '2xl': '1136px',      
                },    
            },    
            extend: {      
                inset,      
                spacing    
            },  
        },  
        variants: {    
            extend: {    },  
        },  
        plugins: []
}

tailwind.theme.js:

//将px转换为
    remconst pxToRem = (px)=> `${px / 16}rem`
// 宽高
    const spacing = {    
    "1px": "0.0625rem",    
    "2px": "0.125rem",    
    "3px": "0.1875rem",    
    "4px": "0.25rem",    
    "5px": "0.3125rem",    
    "6px": "0.375rem",    
    "7px": "0.4375rem",    
    "8px": "0.5rem",    
    "9px": "0.5625rem",    
    "10px": "0.625rem",    
    "11px": "0.6875rem",    
    "12px": "0.75rem",    
    "13px": "0.8125rem",    
    "14px": "0.875rem",    
    "15px": "0.9375rem",    
    "16px": "1rem",    
    "17px": "1.0625rem",    
    "18px": "1.125rem",    
    "19px": "1.1875rem",    
    "20px": "1.25rem",    
    "21px": "1.3125rem",    
    "22px": "1.375rem",    
    "23px": "1.4375rem",    
    "24px": "1.5rem",    
    "25px": "1.5625rem",    
    "26px": "1.625rem",    
    "27px": "1.6875rem",    
    "28px": "1.75rem",    
    "29px": "1.8125rem",    
    "30px": "1.875rem",    
    "31px": "1.9375rem",    
    "32px": "2rem",    
    "33px": "2.0625rem",    
    "34px": "2.125rem",    
    "35px": "2.1875rem",    
    "36px": "2.25rem",    
    "37px": "2.3125rem",    
    "38px": "2.375rem",    
    "39px": "2.4375rem",    
    "40px": "2.5rem",    
    "41px": "2.5625rem",    
    "42px": "2.625rem",    
    "43px": "2.6875rem",    
    "44px": "2.75rem",    
    "45px": "2.8125rem",    
    "46px": "2.875rem",    
    "47px": "2.9375rem",    
    "48px": "3rem",    
    "49px": "3.0625rem",    
    "50px": "3.125rem",    
    "51px": "3.1875rem",    
    "52px": "3.25rem",    
    "53px": "3.3125rem",    
    "54px": "3.375rem",    
    "55px": "3.4375rem",    
    "56px": "3.5rem",    
    "57px": "3.5625rem",    
    "58px": "3.625rem",    
    "59px": "3.6875rem",    
    "60px": "3.75rem",    "61px": "3.8125rem",    "62px": "3.875rem",    "63px": "3.9375rem",    "64px": "4rem",    "65px": "4.0625rem",    "66px": "4.125rem",    "67px": "4.1875rem",    "68px": "4.25rem",    "69px": "4.3125rem",    "70px": "4.375rem",    "71px": "4.4375rem",    "72px": "4.5rem",    "73px": "4.5625rem",    "74px": "4.625rem",    "75px": "4.6875rem",    "76px": "4.75rem",    "77px": "4.8125rem",    "78px": "4.875rem",    "79px": "4.9375rem",    "80px": "5rem",    "81px": "5.0625rem",    "82px": "5.125rem",    "83px": "5.1875rem",    "84px": "5.25rem",    "85px": "5.3125rem",    "86px": "5.375rem",    "87px": "5.4375rem",    "88px": "5.5rem",    "89px": "5.5625rem",    "90px": "5.625rem",    "91px": "5.6875rem",    "92px": "5.75rem",    "93px": "5.8125rem",    "94px": "5.875rem",    "95px": "5.9375rem",    "96px": "6rem",    "97px": "6.0625rem",    "98px": "6.125rem",    "99px": "6.1875rem",    "100px": "6.25rem",    "114px": pxToRem(114),    "120px": pxToRem(120),    "130px": pxToRem(130),    "135px": pxToRem(135),    "168px": pxToRem(168),    "176px": pxToRem(176),    "224px": pxToRem(224),    "237px": pxToRem(237),    "257px": pxToRem(257),    "260px": pxToRem(260),    "264px": "16.5rem",    '270px':pxToRem(270),    '280px':pxToRem(280),    "290px": pxToRem(290),    "300px": "18.75rem",    "343px": "18rem",    '392px':pxToRem(392),    "400px": "25rem",    "452px": "28.25rem",    "480px": "30rem",    "600px": "37.5rem",    "720px": "45rem",    '1010px':pxToRem(1010),    '1028px':pxToRem(1028),    '1200px':pxToRem(1200),    '1135px':pxToRem(1135),}

解决方案：将spacing配置项转为css格式，如：

const spacing = {    "1px": "0.0625rem",
    }

转为

.w-1px {  width: 0.0625rem;}.h-1px {  height: 0.0625rem;}

实现步骤：使用nodeJS遍历spacing，拼接成css格式字符串，写入spacing.css文件内。

const fs =require("fs")// 宽高const pxToRem = (px)=> `${px / 16}rem`const spacing = {    "1px": "0.0625rem",    "2px": "0.125rem",    "3px": "0.1875rem",
     ......
     ......
}

let str = ''Object.entries(spacing).forEach(([key,value])=>{    str += `.w-${key}{        width:${value}    }\n    .h-${key}{       height:${value}    }\n`    console.log('key,value',key,value);})fs.writeFile('./spacing.css', str,function(err){    if(!err){        console.log('写入完毕！');    }})

最后把tailwind.config.js内配置的spacing去掉，然后将spacing.css引入就可以啦！