快捷導(dǎo)航

完美解決vue 項(xiàng)目開(kāi)發(fā)越久 node_modules包越大的問(wèn)題

更新時(shí)間：2023年09月16日 09:24:26 作者：kxmdjqq

這篇文章主要介紹了vue 項(xiàng)目開(kāi)發(fā)越久 node_modules包越大的問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

解決 vue 項(xiàng)目開(kāi)發(fā)越久 node_modules包越大的問(wèn)題

vue 每次編譯都會(huì)將編譯后的文件緩存在 node_modules /.cache 里面，因此需要在 vue.config.js 配置取消緩存

compression-webpack-plugin 禁止緩存
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
    plugins: [
      new CompressionPlugin({
        cache: false, // 取消緩存
        algorithm: "gzip",
        filename: "[path].gz[query]",
        test: /\.(js|css|woff|woff2|json|txt|html|ico|svg)(\?.*)?$/i, // 要壓縮的文件
        threshold: 10240, // 壓縮超過(guò)10k的數(shù)據(jù)
        deleteOriginalAssets: false, // 不刪除壓縮前的文件，如果瀏覽器不支持Gzip，則會(huì)加載源文件
        minRatio: 0.8, // 壓縮比大于0.8的文件將不會(huì)被壓縮
      }),
    ],
}

vue項(xiàng)目中node_modules內(nèi)容修改并且永久生效（Popup彈出層組件）

在做vue項(xiàng)目的時(shí)候用了vantUI中Popup彈出層組件，由于項(xiàng)目的需要，要求表頭的層級(jí)比彈出層的層級(jí)大，然后就會(huì)設(shè)置z-index，但是Popup組件每點(diǎn)擊一次他的z-index值就會(huì)增大這是此組件的一個(gè)屬性，可以把表頭的z-index設(shè)置成特別大，但是覺(jué)得這對(duì)于一個(gè)會(huì)疊加z-index的組件來(lái)說(shuō)始終不是解決辦法，然后就找到了vant中設(shè)置Popup的代碼修改了一下。

這是我項(xiàng)目中此文件的路徑node_modules/vant/es/mixins/popup/index.js。但是修改了以后當(dāng)時(shí)沒(méi)問(wèn)題，當(dāng)重新 npm install的時(shí)候還是會(huì)回到初始化的時(shí)候，此時(shí)就需要借助patch-package來(lái)打一個(gè)補(bǔ)丁。

使用npm安裝 npm i patch-package

使用yarn安裝 yarn add patch-package postinstall-postinstall

安裝完成需要在packge.json中設(shè)置 "postinstall": "patch-package"

然后再去修改node_modules中的內(nèi)容，手動(dòng)執(zhí)行npx patch-package加修改的文件名，執(zhí)行完成后會(huì)在項(xiàng)目中生成一個(gè)補(bǔ)丁文件來(lái)記錄你所修改的內(nèi)容。

到此這篇關(guān)于解決 vue 項(xiàng)目開(kāi)發(fā)越久 node_modules包越大的問(wèn)題的文章就介紹到這了,更多相關(guān)vue node_modules包越大內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: