1. 不生成.map文件

默認情況下，當我們執行 npm run build 命令打包完一個項目后，會得到一個dist目錄，里面有一個js目錄，存放了該項目編譯后的所有js文件。我們發現每個js文件都有一個相應的 .map 文件，它們僅是用來調試代碼的，可以加快打包速度，但會增大打包體積，線上我們是不需要這個代碼的。這里我們需要配置不生成map文件。

config/index.js文件中，找到 productionSourceMap: true 這一行，將 true 改為 false。

在 vue.config.js 中編寫以下內容：

module.exports = { productionSourceMap: false}

2. 按需引入第三方包

默認情況下，在打包完后的js文件中，vendor.xxx.js 這個文件是非常大的，它主要是我們用到的第三方包（vue、vue-router、vuex、axios、element-ui等等）。這里面的大部分是我們要用到的功能，而像 element-ui 這種，明顯可以按塊來分，我們只是用到了里面的個別組件，完全可以把它按需取出，沒必要全部打包。

在 element-ui 的官網，介紹了按需引入的方法，借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

3. 路由懶加載

默認情況下，在打包完后的js文件中，app.xxx.js 這個文件是非常大的，它主要是我們編寫的一些組件。那么無法避免的問題就是：當用戶訪問網頁的時候，第一次的請求要加載整個 app.xxx.js，當我們的項目比較復雜的時候，這個文件也是相當大的。

接下來我們要做的，就是路由懶加載。也就是當訪問一個頁面的時候，只加載當前組件相關的js資源，訪問其它頁面的時候，再加載相應的組件代碼。

通過vue提供的路由懶加載功能，我們能將原來的一個 app.xxx.js 文件，分塊分成多個。

① 首先根據官網的說明，我們需要安裝一個插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

② 然后在 babel.config.js 中配置如下內容（網上說的是 .babelrc 文件，這是以前的配置格式）：

module.exports = { presets: ['@vue/app'], plugins: ['@babel/plugin-syntax-dynamic-import']};

③ 接下來修改路由加載組件部分的代碼。

這是我們原來的路由寫法：

router.js

import Vue from 'vue';import Router from 'vue-router';import Home from './views/Home.vue';import About from './views/About.vue';import Form from './views/Form.vue';import Table from './views/Table.vue';import NavMenu from './views/NavMenu.vue';Vue.use(Router);export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/form', name: 'myForm', component: Form }, { path: '/table', name: 'myTable', component: Table }, { path: '/nav_menu', name: 'myNavMenu', component: NavMenu } ]});

這是我們修改完的路由寫法：

router.js

import Vue from 'vue';import Router from 'vue-router';const Home = () => import('./views/Home.vue');const About = () => import('./views/About.vue');const Form = () => import('./views/Form.vue');const Table = () => import('./views/Table.vue');const NavMenu = () => import('./views/NavMenu.vue');Vue.use(Router);export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/form', name: 'myForm', component: Form }, { path: '/table', name: 'myTable', component: Table }, { path: '/nav_menu', name: 'myNavMenu', component: NavMenu } ]});

更細節的內容參見官方文檔

以上就是Vue項目打包編譯優化方案的詳細內容，更多關于vue項目打包優化的資料請關注好吧啦網其它相關文章！