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

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

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

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

進入可視化面板

默認情況下，vue-cli 3.0生成的項目，隱藏了webpack配置項，如果我們需要配置webpack

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

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

module.exports = {
    chainWebpack:config=>{
        //發(fā)布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認的打包入口，調用clear則是刪除默認的打包入口
            //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')
        })
    }
}

補充：

chainWebpack可以通過鏈式編程的形式，修改webpack配置

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

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

默認情況下，依賴項的所有第三方包都會被打包到js/chunk-vendors.

.js文件中,導致該js文件過大

那么我們可以通過externals排除這些包，使它們不被打包到js/chunk-vendors.

module.exports = {
    chainWebpack:config=>{
        //發(fā)布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認的打包入口，調用clear則是刪除默認的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
            //使用externals設置排除項
            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文件體積變小