快捷導(dǎo)航

vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)

更新時間：2022年04月30日 12:45:46 作者：吃了碳水就想睡覺

這篇文章主要介紹了vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

通常在一個vue項(xiàng)目中會用到很多插件什么，swiper,axios,vuerouter,vuex,…，那么使用了很多插件勢必會造成打包的js文件過大，影響加載速度，造成不好的用戶體驗(yàn)，那么我就來講一件我自己總結(jié)打包方式，（讓js文件變?。?/p>

我使用的命令是 vue ui 可視化打包操作

進(jìn)入可視化面板

默認(rèn)情況下，vue-cli 3.0生成的項(xiàng)目，隱藏了webpack配置項(xiàng)，如果我們需要配置webpack

需要通過vue.config.js來配置

在項(xiàng)目根目錄中創(chuàng)建vue.config.js文件，

module.exports = {
    chainWebpack:config=>{
        //發(fā)布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認(rèn)的打包入口，調(diào)用clear則是刪除默認(rèn)的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //開發(fā)模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

補(bǔ)充：

chainWebpack可以通過鏈?zhǔn)骄幊痰男问剑薷膚ebpack配置

configureWebpack可以通過操作對象的形式，修改webpack配置

**###7.加載外部CDN

默認(rèn)情況下，依賴項(xiàng)的所有第三方包都會被打包到j(luò)s/chunk-vendors.

.js文件中,導(dǎo)致該js文件過大

那么我們可以通過externals排除這些包，使它們不被打包到j(luò)s/chunk-vendors.

module.exports = {
    chainWebpack:config=>{
        //發(fā)布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認(rèn)的打包入口，調(diào)用clear則是刪除默認(rèn)的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
            //使用externals設(shè)置排除項(xiàng)
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                moment:'moment'
            })
        })
        //開發(fā)模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

在public 中的index文件中使用cdn引入外部js 從而然打包的js文件體積變小