Vue項目優(yōu)化
一. 項目優(yōu)化策略
第三方庫啟用 CDN
ui 組件按需加載
路由懶加載
首屏內(nèi)容定制
gzip 開啟
二. 項目添加 nprogress 進度條
- 安裝依賴包
npm i nprogress -S
- 在main.js 中導入依賴包和樣式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
- 在axios請求攔截器和響應攔截器中配置啟動和結(jié)束
// axios 請求攔截
axios.interceptors.request.use(function (config) {
NProgress.start()
return config
})
// axios 響應攔截
axios.interceptors.response.use(function (response) {
NProgress.done()
return response
})
三. 自動移除 console.log
- 安裝依賴包
yarn add babel-plugin-transform-remove-console -D
- 在 .babelrc | babel.config.js 文件中配置 plugins 插件
const prodPlugins = []
// 生產(chǎn)環(huán)境移除console
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
'presets': [
'@vue/app'
],
plugins: [
[
'import',
{
'libraryName': 'vant',
'libraryDirectory': 'es',
'style': true
},
'vant'
],
...prodPlugins
]
}
四. 通過可視化的 ui 面板查看報告（推薦）
在可視化的ui面板中患朱，通過控制臺和分析面板裸诽， 可以方便的查看存在的問題
五. vue-cli3.0 webpack全局配置 vue.config.js
https://cli.vuejs.org/zh/config
六. 為開發(fā)模式與發(fā)布模式設置不同的打包入口
配置開發(fā)入口文件 src/main-dev.js 和發(fā)布模式入口文件 src/main-prod.js
通過 configureWebpack 或者 chainWebpack 來修改默認的配置
configureWebpack 通過對象形式操作
chainWebpack 通過鏈式形式操作
- 在 vue.config.js 文件中通過 chainWebpack 修改入口文件
module.exports = {
chainWebpack: config => {
// 發(fā)布模式
config.when(process.env.NODE_ENV === 'production', config => {
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')
})
}
}
七. 通過 externals 加載外部 CDN 資源
- 配置 vue.config.js
chainWebpack: config => {
// 發(fā)布模式
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',
'element-ui': 'elementUi',
axios: 'axios',
nprogress: 'NProgress'
})
})
// 開發(fā)模式
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
})
}
- 在 index.html 文件中引入 CDN服務依賴文件
<!-- nprogress 的樣式表文件 -->
<link rel="stylesheet" />
<!-- vant 的樣式表文件 -->
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- nprogress 的 js 文件 -->
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- moment 的 js 文件 -->
<script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
<!-- vant 的 js 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>
ps: vant ui 引入CDN文件之后橙依，可以直接去掉 按需引入
八. 首頁內(nèi)容定制
- 配置 vue.config.js
chainWebpack: config => {
// 發(fā)布模式
config.when(process.env.NODE_ENV === 'production', config => {
// 配置入口文件
config
.entry('app')
.clear()
.add('./src/main-prod.js')
// 配置CDN
config
.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
nprogress: 'NProgress',
moment: 'moment'
})
// 配置首頁定制
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 開發(fā)模式
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
// 配置首頁定制
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
}
- 在index.html中通過流程控制 是否加載CDN資源
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>mall-vue</title>
<% if(htmlWebpackPlugin.options.isProd){ %>
<title>vue-ssr</title>
<!-- nprogress 的樣式表文件 -->
<link rel="stylesheet" />
<!-- vant 的樣式表文件 -->
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- nprogress 的 js 文件 -->
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- moment 的 js 文件 -->
<script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
<!-- vant 的 js 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>
<%}%>
九. 實現(xiàn)路由懶加載
- 安裝依賴包
yarn add @babel/plugin-syntax-dynamic-import -D
- 配置 babel.config.js
plugins: [
'@babel/plugin-syntax-dynamic-import'
]
- 按需加載路由組件
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')
