生活随笔
收集整理的這篇文章主要介紹了
Vue 项目上线优化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上線項目的優化
優化上線項目，首先在上線打包時我們通過babel插件將console清除，當然對項目打包后的體積的影響是微乎其微，對項目的入口文件的改善也是很有必要的，因為在開發階段和上線如果我們使用的是同一入口文件，要知道我們的項目真正上線運行是正規的接口，而我們開發階段可能是測試接口為返回假數據，使用同一接口我們需要頻繁更改上線和開發接口，所以我們通過配置vue.config.js文件使上線和開發階段我們使用不同的接口文件，省去了更改接口等不必要的麻煩，考慮到打包時包的體積過大導致加載速度的延遲，我們通過CDN和懶加載兩種方式進行改善，前者就將我們的項目上線后還需要引用的大量依賴包，轉換為CDN節點的引用，從而改善了包的體積，但是加載還是很慢，所以使用后者路由懶加載，將模塊進行拆分，每個個體的體積很小，眾多模塊有序加載，用到哪些模塊就優先加載哪些，最后在通過服務器采用一定的壓縮算法，對文件體積進行壓縮后，再發送給客戶端，進而有效的改善了包的體積，以及加載速度.
在使用 npm run build 打包時 移除console
初衷：
隨著項目功能的不斷完善 代碼的累積 項目中的龐大代碼數量 造成我們打包時的長時間等待 尤其是我們在開發階段留下的過多的測試代碼 例如最常見不過的console 消耗我們的時間 并且占有一定的內存
優化：
使用 babel中 的一個插件，因為webpack 打包時會使用 babel 進行代碼降級，所以babel 插件可以在打包過程中將 console 移除
安裝插件：
npm install babel-plugin-transform-remove-console --save-dev
配置babel.config文件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {prodPlugins.push('transform-remove-console')
}
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: ['transform-remove-console']
}
這樣配置后 再次打包 包中就沒有console了
問題：當運行npm run serve時 也會刪除console 但是開發階段我們需要
改善babel.config文件：
現在 只有在打包時會刪除console
改善入口文件
初衷：
項目中的默認入口文件時main.js文件 不管是打包 還是開發階段使用的都是這一文件
在卡法階段我們可能調用一端口返回假數據 為調試我們的代碼 但是在上線后我們需要用正式接口 可能不止一個 但是我們左右手動更改較為麻煩 且容易出錯
優化：
創建兩個入口文件：
- 一個用于開發環境的打包 dev_env.js
- 一個用于項目上線的打包 prod_env.js
配置打包的入口文件
module.exports={chainWebpack:config=>{config.when(process.env.NODE_ENV === 'production',config=>{config.entry('app').clear().add('./src/prod_env.js')})config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear().add('./src/dev_env.js')})}
}
說明
- 開發時，使用 npm run serve 命令，NODE_ENV 的值就是 developmnent ，所以會將 dev.env.js 作為入口文件
- 部署時，使用 npm run build 命令，NODE_ENV 的值就是 production，所以會將 prod_evn.js 作為入口文件
改善打包時包的體積大小
初衷：
通常情況下 項目中通過import方式引入的包 會將整個包下載到客戶端 這可能會導致程序的加載速度非常慢
優化
解決方案一：CDN
將線上環境中用到一些依賴，比如 vue、vueRouter 、axios 等，使用 cdn 節點的方式引用，而不是打到包里去
此項目中 將項目上線后仍然需要用到的一些依賴包從prod_evn.js文件中刪除 然后在 public/index.html 中使用 cdn 節點引用
- 首先修改我們上線時的入口文件
- 然后在 public/index.html 中加入如下引用
<link rel
="stylesheet" type
="text/css" href
="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" />
<link rel
="stylesheet" type
="text/css" href
="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" />
<link rel
="stylesheet" type
="text/css" href
="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" />
<link rel
="stylesheet" type
="text/css" href
="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
<script type
="text/javascript" src
="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script
>
<script type
="text/javascript" src
="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script
>
<script type
="text/javascript"src
="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script
>
<script src
="https://unpkg.com/axios/dist/axios.min.js"></script
>
<script src
="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script
>
<script src
="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script
>
<script src
="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script
>
打包后 包的體積明顯減小
路由懶加載
初衷：
在上面 通過babel 插件 將console刪除 通過CDN節點 等 減小包的體積 但是包還是過大 影響加載速度 以當前項目為例，首先展示的登錄頁，事實上，此時沒有必要加載其他的組件，如商品、類別、角色用戶等組件的代碼
因為代碼被打包到一個文件中，導致下載這個文件太慢
優化：
切分之后，并不是瀏覽器訪問某個路由，才去下載對應的模塊，仍然在首次訪問程序時，下載所有模塊，只不過每個模塊分的很小，加載首頁時需要的模塊能夠更快的下載下來，所以能夠更快的顯示
安裝插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
修改babel配置文件
修改 router/index.js 中的路由引用
// // 引入login.vue組件
// import Login from '../components/login.vue'
// // 引入home.vue組件
// import Home from '../components/home.vue'
// import Welcome from '../components/welcome.vue'
// import Users from '../components/user/users.vue'
// import Rights from '../components/rights/rights.vue'
// import Role from '../components/rights/role.vue'
// import Category from '../components/goods/Category.vue'
// import Params from '../components/goods/Params.vue'
// import GoodsList from '../components/goods/GoodsList.vue'
// import GoodsAdd from '../components/goods/GoodsAdd.vue'
// import Orders from '../components/order/Orders.vue'
// import Report from '../components/report/Report.vue'
// import GoodsEdite from '../components/goods/GoodsEdite.vue'
const Login = () => import(/* webpackChunkName: "group-login" */ '../components/login.vue')
const Home = () => import(/* webpackChunkName: "group-common" */ '../components/home.vue')
const Welcome = () => import(/* webpackChunkName: "group-common" */ '../components/welcome.vue')
const Users = () => import(/* webpackChunkName: "group-common" */ '../components/user/users.vue')
const Rights = () => import(/* webpackChunkName: "group-rights" */ '../components/rights/rights.vue')
const Role = () => import(/* webpackChunkName: "group-rights" */ '../components/rights/role.vue')
const Category = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/Category.vue')
const Params = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/Params.vue')
const GoodsList = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsList.vue')
const GoodsAdd = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsAdd.vue')
const GoodsEdite = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsEdite.vue')
const Orders = () => import(/* webpackChunkName: "group-rrders" */ '../components/order/Orders.vue')
const Report = () => import(/* webpackChunkName: "group-Orders" */ '../components/report/Report.vue')
重新打包效果可見
router/index.html 主頁內容的形成
初衷：
在上面我們使用cdn節點進行優化時。在index.html中 添加大量cdn節點的引入
但是在開發階段的打包中我們是不需要這種方式的 但是手動刪除或者添加這些cdn節點實在麻煩
優化：
我們希望的是，部署的時候 index.html 中使用這些 CDN 節點的依賴，開發階段，不希望 index.html 中的這些引用存在，而是繼續使用本地的包
這就需要在 index.html 中根據當前的打包環境是開發還是部署，動態的決定 index.html 中是否顯示這些引用
-
在vue.config.js中添加配置
-
修改public/index.html
這樣 首頁中的cdn引入代碼 就不會沖突
服務器文件壓縮
初衷：
客戶端請求某個文件時，服務器端采用一定的壓縮算法，對文件體積進行壓縮后，再發送給客戶端
對于 node.js 來說，可以使用 compression 中間件
優化 ：
項目打包后將dist文件夾 剪切到服務器端compression 壓縮文件
npm install compression
項目相比開始 快了很多
總結
以上是生活随笔為你收集整理的Vue 项目上线优化的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
