前言
相信現在很多人都是用Vue做過了各種項目，但是項目代碼做完和上線並不代表這結束，還有上線以後的優化也是很重要的一點，這次的博客就來給大家說一下如何優化一下Vue的項目，讓你的項目打包和運行速度更上一個臺階。
優化策略
生成打包報告
修改webpack默認配置
加載外部CDN資源
路由懶加載
開啟gizp配置
生成打包報告
生成Vue的打包報告目的在於讓我們先大概的了解到當前項目生成的各個文件的大小，讓我們心裡有數，知道哪裡需要優化。
通過命令行參數形式生成報告：
//通過 vue-cli的命令選項可以生成打包報告
// --report 選項可以生成 report.html 用以分析包內容
vue-cli-service build --report
通過可視化面板直接查看報告：
可以在UI面板中，通過控制臺和分析面板，可以方便的查看項目中所存在的問題。
上邊圖片中標註的就是我們需要注意的，依賴項很多，導致打的包最終體積非常的大，相信這項目如果上線那麼前端會先請求這個無比巨大的js文件，估計甲方爸爸會錘死前端人員。
通過 vue.config.js修改webpack的默認配置
通過vue-cli 3,0 工具生成的項目，默認隱藏了所有的 webpack配置項，目的是為了屏幕項目的配置過程，讓程式設計師的工作重心放到具體的功能和邏輯的實現上。
如果程式設計師有修改 webpack默認配置的需求，可以在項目根目錄中 按需創建vue.config.js這個配置文件，從而對項目的打包發布過程做自定義配置，具體可以參考 https://cli.vuejs.org/zh/config/#vue-config-js
為開發模式和發布模式指定不同的打包入口：
默認情況下，Vue項目的開發模式和發布模式公用一個入口文件(src/main.js)，為了將項目的開發過程與發布過程分離，我們可以設置兩種模式，各自指定打包入口文件。
開發模式入口文件：src/main-dev.js
發布模式入口文件：src/main-prod.js
通過chainWebpack自定義打包入口：
module.exports = {
lintOnSave: false,
chainWebpack:config=>{
//生產環境
config.when(process.env.NODE_ENV === 'production',config=>{
//注意main-prod.js是已經存在的文件
config.entry('app').clear().add('./src/main-prod.js')
})
//開發環境
config.when(process.env.NODE_ENV === 'development',config=>{
//注意main-dev.js是已經存在的文件
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
因為開發生產環境不同，所以在main.js文件中內容就可能不同，為了解決耦合，我們就把main.js 重新劃分成了兩個文件 分別是main-dev.js 和 main-prod.js
通過externals加載外部CDN資源:
默認情況下，通過import語法導入的第三方依賴包，最終會打包合併到同一個文件中，從而導致打包成功後，單文件體積過大的問題。
vue.config.js的配置externals節點：
module.exports = {
lintOnSave: false,
chainWebpack:config=>{
//生產環境
config.when(process.env.NODE_ENV === 'production',config=>{
config.entry('app').clear().add('./src/main-prod.js')
config.set('externals',{
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
lodash:'_',
echarts:'echarts',
nprogress:'NProgress',
'vue-quill-editor':'VueQuillEditor'
})
})
//開發環境
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
通過設置externals這個節點，指定哪些包直接去window上去查找使用，而不會將這些指定的包再次打包起來，這樣就可以減小最終生成的js的文件體積。
去除main.js中引入的第三方包的樣式表：
將這些樣式表也統統的從main.js文件中去除，統一由CDN進行引入。
在public/index.html中添加 css和js的CDN地址：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- nprogress 的樣式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本編輯器 的樣式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.1.6/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本編輯器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
我們通過CDN去引用css樣式的話，我們項目生成的包中就不會存在這些css文件，可以減小項目的體積，並且，我們還將 指定的js文件也通過CDN的方式來引用，這樣這些js就會註冊到windows全局中，這樣就對應到了vue.config.js配置externals節點的內容了。
引入CDN效果對比：
未使用CDN：
使用CDN後：
甲方爸爸打人的力度輕了許多。
路由懶加載
當項目打包構建的時候，js包會變得非常巨大，影響頁面加載，如果我們能夠把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應的組件，這樣就更加高效了。
安裝@bable/plugin-syntax-dynamic-import包
在babel.config.js配置文件中聲明該插件
將路由改為按需加載的形式：
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
其中webpackChunkName 指定了 打包的文件名字，讓 Login.vue 、Home.vue 、 Welcome.vue 統一打到 指定的包中。
開啟gizp配置：
這一項應該由後端小哥來做，使用gizp可以減少文件體積，使得傳輸速度更快，我們就拿Express來展示一下如何去做。
//安裝相應的包
npm install compression -D
//導入包
const compression = require('compression')
//啟用中間件
app.use(compression())
這樣我們請求包的體積就會變得更小，有助於提升我們項目運行的速度。
最終效果展示
最終在我們經過上述一系列的操作以後，我們最終生產環境打出來的包體積只有356.2KB，這樣我們項目在上線以後，就可以減輕首頁假死的問題，同時因為請求的文件小了很多，所以運行速度也會加快，大家趕快去優化一下自己的項目吧。
版權聲明：本文為CSDN博主「靖凡無所畏懼」的原創文章，遵循CC 4.0 BY-SA版權協議。原文：https://blog.csdn.net/wjf1997/article/details/106248699
更多精彩推薦
☞中國第一代程式設計師潘愛民的 30 年程序人生
☞雲上容器 ATT&CK 矩陣詳解，阿里雲助力企業容器化安全落地
☞秋名山老司機從上車到翻車的悲痛經歷，帶你深刻了解什麼是 Spark on Hive！| 原力計劃
☞Python 還能實現哪些 AI 遊戲？附上代碼一起來一把！
☞數據科學產業中哪些架構最熱門？本文為你盤點了 5 款！
☞行業大神支招！5 個方法讓你的數字資產免受黑客禍害！