Vue專案優化的一些實戰策略
vue專案完成後就要從開發環境轉成生產環境
一些第三方的包體積過大,導致生成js檔案過於龐大,這是時候可以生成打包報告來檢視專案中的問題
1.生成報告有兩種方式,一種使用npm run build --report
2.另一種使用vue腳手架的ui視覺化面板,在專案中輸入vue ui
3.點選生產環境下的執行按鈕,可以看到打包出來的js檔案一共有2M之多,js/chunk-vendors.js就是一些專案依賴檔案,
再右側可以看到element-ui 和echarts 以及富文字編輯器,樹狀表格外掛這幾個依賴項的體積最大,接下來可以針對這些做優化
4.複製兩份main.js檔案命名為main-dev.js和main-prod.js,分別代表開發環境和生產環境
通過 vue.config.js 修改 webpack 的預設配置,為開發模式與釋出模式指定不同的打包入口
module.exports = { lintOnSave: false,chainWebpack: config => { // 釋出模式 config.when(process.env.NODE_ENV === 'production',config => { config.entry('app').clear().add('./src/main-prod.js') }) // 開發模式 config.when(process.env.NODE_ENV === 'development',config => { config.entry('app').clear().add('./src/main-dev.js') }) } }
5.預設情況下,通過 import 語法匯入的第三方依賴包,最終會被打包合併到同一個檔案中,從而導致打包成功 後,單檔案體積過大的問題。
為了解決上述問題,可以通過 webpack 的 externals 節點,來配置並載入外部的 CDN 資源。凡是宣告在 externals 中的第三方依賴包,都不會被打包
http://www.cppcns.commodule.exports = { lintOnSave: false,config => { config.entry('app').clear().add('./src/main-prod.js') config.set('externals',{ vue: 'Vue',axios: 'axios',lodash: '_',echarts: 'echarts',nprogress: 'NProgress','vue-quill-editor': 'VueQuillEditor' }) config.plugin('html').tap(args => { args[0].isProd = true return args }) }) // 開發模式 config.when(process.env.NODE_ENV === 'development',config => { console.log(config); config.entry('app').clear().add('./src/main-dev.js') config.plugin('html').tap(args => { args[0].isProd = false return args }) }) } }
6.同時在public目錄下的index.html檔案中,引入這些第三方依賴包的CDN檔案
打包編譯,可以看到重新打包出來的檔案從原先的2M變成了200K
7.然後可以對路由進行懶載入,安裝@babel/plugin-syntax-dynamic-import依賴
(上一個外掛transform-remove-console作用是在生產環境清除全部console.log)
const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ],程式設計客棧 plugins: [ [ 'component',{ libraryName: 'element-ui',styleLibraryName: 'theme-chalk' } ],...prodPlugins,'@babel/plugin-syntax-dynamic-import' ] }
外掛是使用方法可以參考vue-router的官方文件
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
改造router檔案
import Vue from 'vue' import VueRouter from 'vue-router' // import Login from '../components/Login.vue' const Login = () => import( /* webpackChunkName: "login_home_welcome" */ '../components/Login.vue') // import Home from '../components/Home.vue' const Home = () => import( /* webpackChunkName: "login_home_welcome" */ '../components/Home.vue') // import Welcome from '../components/Welcome.vue' const Welcome = () => import( /* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue') // import Users from '../components/user/Users.vue' const Users = () => import( /* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue') // import Rights from '../components/power/Right.vue' const Rights = () => import( /* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Right.vue') // import Roles from '../components/power/Roles.vue' const Roles = () => import( /* webpackChunkName: "Users_RightszWYwKeAn_Roles" */ '../components/power/Roles.vue') // import Cate from '../components/goods/Cate.vue' const Cate = () => import( /* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue') // import Params from '../components/goods/Params.vue' const Params = () => import( /* webpackChunkName: "Cate_Params" */ '.www.cppcns.com./components/goods/Params.vue') // import GoodsList from '../components/goods/List.vue' const GoodsList = () => import( /* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue') // import Add from '../components/goods/Add.vue' const Add = () => import( /* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue') // import Order from '../components/order/Order.vue' const Order = () => import( /* webpackChunkName: "Order_Report" */ '../components/order/Order.vue') // import Report from '../components/report/Report.vue' const Report = () => import( /* webpackChunkName: "zWYwKeAnOrder_Report" */ '../components/report/Report.vue')
面試問題:
vue前端專案有什麼優化策略?
1、生成打包報告。(可以發現一些問題,並進行解決)
2、使用第三方庫啟用CDN載入
3、使用Element-ui的話,按需載入元件
4、使用路由懶載入
生成打包報告後可以看到哪些問題呢?
可以看到整個專案依賴大小,專案訪問速度,從而進行優化
那怎麼優化專案呢?
到整個專案依賴大小,專案訪問速度,從而進行優化
使用者體驗優化
better-click防止iphone點選延遲
- 在開發移動端vuejs專案時,手指觸控時會出現300ms的延遲效果,可以採用better-click對ipone系列的相容體驗優化。
菊花loading
- 菊花loading,在載入資源過程之中,可以提供loading。此菊花loading不是那菊花。所以可以自由選擇自己喜歡的菊花。
骨架屏載入
- 在首屏載入資源較多,可能會出現白屏和閃屏的情況。體驗不好。盜圖一波,小米商城使用骨架屏進行首屏在資源資料還沒有載入完成時顯示,給很好的體驗效果。
總結
到此這篇關於Vue專案優化實戰策略的文章就介紹到這了,更多相關Vue專案優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!