文章目录
项目优化策略
1、生成打包报告
2、第三方库启用CDN
3、Element-UI组件按需加载
4、路由懒加载
5、首页内容定制
nprogress插件给项目网页加载加进度条=>挂载在拦截器中
去除console插件,babel-plugin-transfrom-remove-console
在babel.config.js中配置,并按需导入
// 项目开发阶段用到的babel插件
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'
]
}
生成打包报告
1、命令行vue-cli-service build --report
2、通过可视化UI面板直接查看报告
在可视化UI面板中,通过控制台和分析面板,可以方便的看到项目中所存在的问题。
在报告中观察项目中比较大的模块,然后针对这些模块进行具体优化
通过vue.config.js修改webpage的默认配置
通过vue-cli3.0 工具生成的项目,默认隐藏了所有的webpage的配置项,目的是为了屏蔽项目的额配置过程,让程序员把工作的重心,放到具体的功能和业务具体实现上。
如果程序员需要修改webpage的默认配置需求,可以在项目的根目录中,按需创建vue.config.js这个配置文件,从而对项目的打包过程做自定义的配置。—怎么配置自己查
module.exports = {
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.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 开发模式
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
})
})
}
}
为项目创建不同的打包入口
默认情况下,vue项目的开发模式和发布模式共用一个打包的入口文件(src/main.js)。为了将项目的开发过程和发布过程分离,我们可以为两种模式设置各自的打包入口文件。
=>
1、开发模式的入口文件为src/main-dev.js
2、发布模式的入口文件为src/main-prod.js
·····································································································
在vue.config.js的导出的配置对象中,新增configureWebpack和chainWebpack节点,来定义webpack的打包配置。
在这里,configureWebpack和chainWebpack的作用相同,唯一他们的区别就是他们修改webpack的方式不同:
1、chainWebpack通过链式编程的形式,来修改默认的webpack配置
2、configureWebpack通过操作对象的形式,来修改默认的webpack配置
具体去百度
通过chainwebpack自定义打包入口
module.exports = {
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.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 开发模式
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
})
})
}
}
通过external加载外部的CDN资源
默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到一个文件中,从而导致打包成功后,单文件体积过大的问题。
为了解决上述问题,可通过webpack的external节点,来配置并加载外部的CDN资源。凡是声明在external中的第三方依赖包,都不会被打包。
防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
通过CDN配置element-UI
1、在main.js中注释掉按需加载的代码
2、在index.js中通过CDN加载
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
路由懒加载
1、安装 ‘@babel/plugin-syntax-dynamic-import’
2、在babel.config.js中声明该插件
3、
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')
const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/User.vue')
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')
const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue')
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')
项目上线
1、通过node创建web服务器
创建node项目,并安装express,通过express快速创建web服务器,将vue打包生成的dist文件夹托管为静态资源即可:关键代码如下:
const express=require('express');
const app=express();
app.use(express.static('./dist'));
app.listen(80,
console.log('server running at http://127.0.0.1')
)
2、开启gzip配置
使用gzip可以减小文件体积,使传输速度更快。
可以通过服务端使用Express做文件压缩。其配置如下
const express=require('express');
const compression=require('compression')
const app=express();
app.use(compression());
app.use(express.static('./dist'));
app.listen(80,
console.log('server running at http://127.0.0.1')
)
3、配置HTTPS服务
- 传统的http是明文的,不安全
- 采用HTTPS协议对传输的数据进行了加密处理,可以防止数据被中间人窃取,使用更安全
1、申请ssl证书freessl.cn
2、验证DNS(在域名管理后台添加TXT记录)
3、验证通过后,下载SSL证书(公匙,私匙)
4、在后台中配置
const express=require('express');
const compression=require('compression')
const app=express();
app.use(compression());
app.use(express.static('./dist'));
const https=require('https')
const fs=require('fs')
const key={publickey:fs.readFilesync(),privatekey:fs.readFilesync()}
https.createServer(key,app).listen(443)
4、使用pm2插件管理应用
1、在服务器中安装 npm i pm2 -g
2、启动项目:pm2 start 脚本 --name 自定义名称
3、查看运行项目:pm2 ls
4、重启项目:pm2 restart 自定义名称