Vue项目优化 打包

项目优化

nprogess

进度条
基于网络请求 拦截器添加 进度条

eslint 检查提示警告信息

去除console 日志插件

生成打包报告

1. vue-cli-service build --report
2. Vue UI build 分析报告

vue.config.js

webpack 的默认配置

通过import 导入依赖包，会合并到一个文件 体积过大

通过配置externals 加载外部CDN 资源
config.set(‘externals’,{
vue:‘Vue’,
…
})

路由懒加载

1. 安装@babel/plugin-syntax-dynamic-import 插件
2. 在babel.config.jjs配置文件中声明该插件
3. 将路由改为按需加载

打包

新建node项目

1. npm init -y 初始化包管理文件
2. npm i express 安装第三方包
3. 复制dist 下文件
4. 新建 app.js

const express = require('express')
const app = express()

app.use(express.static('./dist'))

app.listen(80,() => {
	console.log("server running....")
})

开启gzip压缩

1. 安装compression
   npm i compression -S

const express = require('express')
***const compression = require("compression")***
const app = express()

***app.use(compession())***
app.use(express.static('./dist'))

app.listen(80,() => {
	console.log("server running....")
})

配置Https服务

https://freessl.cn

使用pm2管理项目应用

npm i pm2 -g
pm2 start 脚本 --name 自定义名称
pm2 ls
pm2 restart | stop | delete 自定义项目名称