剔除项目无用代码
前端性能优化
配置服务器做域名解析
上传项目 启动服务
(1)路由按需加载方案
路由懒加载能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
路由懒加载主要目的是防止 首屏加载内容过多,延时过长,造成白屏,不利于用户体验。
方式1:
在router.js中:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component:Home,
redirect: '/index',
children: [
{
path: '/index',
name: 'index',
component: Index,
},
{
path: '/product/:id',
name: 'product',
component: resolve => require(['./pages/index.vue'], resolve),
},
{
path: '/detail/:id',
name: 'detail',
component: resolve => require(['./pages/detail.vue'], resolve),
}
]
},
{
path: '/login',
name: 'login',
component:resolve => require(['./pages/login.vue'], resolve),
},
{
path: '/cart',
name: 'cart',
component:resolve => require(['./pages/cart.vue'], resolve),
}
]
})
方式2:
使用动态 import语法来定义代码分块点。
-
安装插件
syntax-dynamic-import
:npm i @babel/plugin-syntax-dynamic-import --save
-
在router.js中:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component:Home,
redirect: '/index',
children: [
{
path: '/index',
name: 'index',
component: Index,
},
{
path: '/product/:id',
name: 'product',
component: () => import('./pages/index.vue'),
},
{
path: '/detail/:id',
name: 'detail',
component: () => import('./pages/detail.vue'),
}
]
},
{
path: '/login',
name: 'login',
component:() => import('./pages/login.vue'),
},
{
path: '/cart',
name: 'cart',
component:() => import('./pages/cart.vue'),
}
]
})
(2)删除预加载 - 真正按需
在vue.config.js中加入配置:
module.exports = {
chainWebpack: (config) => {
config.plugins.delete('prefetch');
}
}
(3)服务器部署准备工作
-
购买域名并备案
-
购买服务器
-
域名解析