webpack打包提交代码

https://www.bootcdn.cn/

①在终端运行 npm run build在文件夹中会出现一个 dist 文件夹

终端会出现

或者 运行npm run build --report 会在浏览器打开显示包目录的分析图(主要是告诉你那个包体积比较大)

 

 

在build下的webpack.prod.conf.js文件中添加一个与module、output 平级的externals: {},// 外部导入包的方式

// 把项目中，一些体积比较大的包，抽离为 外部加载的方式
  externals: {
    // 包名: '构造函数'
    vue: 'Vue', // vue
    'vue-router': 'VueRouter', // 路由
    axios: 'axios',
    lodash: '_',
    nprogress: 'NProgress',
    echarts: 'echarts'
  },

CDN(镜像加速)就是网速特别开的一台服务器

在 https://www.bootcdn.cn/

打包时劲量不要使用本地的包要从 https://www.bootcdn.cn/ 网站上找(runtime.min.js之类的包)

比如[下列代码都是放到index.html 中的]:(这样引入相当于按需导入)

 <link href=https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css rel=stylesheet>
 <script src=https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js> </script>
 <script src=https://cdn.bootcss.com/vue/2.5.16/vue.runtime.min.js> </script>
 <script src=https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js> </script>
 <script src=https://cdn.bootcss.com/axios/0.18.0/axios.min.js> </script>
 <script src=https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js> </script>
 <script src=https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js> </script>

 上述完成后 在把 dist 复制出来 创建一个文件夹把dist 放入 在文件夹中在创建一个 app.js

在这个文件中的终端 输入 npm init -y  会生成一个 package.json文件

在输入 npm i express -S 会生成一个 package-lock.json

在 app.js 文件中 app.use(express.static('./dist')  // 托管dist文件

// 导入express 模块
const express = require('express')
// 创建express的服务器实例
const app = express()
// 把 dist 挂载到 app上
app.use(express.static('./dist'))
// 3000是端口号
app.listen(3000,function(){
    console.log('Express server running at http://127.0.0.1:3000')
})

在输入 node ./app.js

 

开启GZip压缩(要在原项目中使用) http://www.expressjs.com.cn/guide/using-middleware.html

首先要 npm install compression

然后 

//导入Gzip压缩的中间件
const compression = require('compression')
// 注册中间件，启用Gzip压缩
app.use(compression())

但是压缩后体积还是大 可以为web服务器开启GZip压缩(Apache、IIS、Tomcat、Node服务器)
如果不启用GZip压缩,那么,服务器上文件的真实大小,,就是网络传输中,真实传输的大小

如果服务器,启用GZip压缩,则 文件在网络中,传输的时候,会被压缩,经过Gzip的压缩之后,文件体积会大约减小到之前的四分之一

 

 

如果项目需要在减小体积 把element-ui按需导入(用到那个导入那个组件) 让后在逐一挂载到vue实例上就可以了[要在原目录中]

按需导入的方法可查看 https://element.eleme.cn/#/zh-CN/component/quickstart

按需导入后记得要把  Vue.use(elementUI) 这个注释掉

 

路由的懒加载https://router.vuejs.org/zh/guide/advanced/lazy-loading.html (要在原项目中)

使用路由懒加载 需要 先 

npm install --save-dev @babel/plugin-syntax-dynamic-import

安装好后需要在 .babelrc文件中的plugins对象中添加 "@babel/plugin-syntax-dynamic-import" 

/* webpackChunkName: "group-foo" */ 不要删除

//      组件名                                     组名          导入的组件
const login = () => import(/* webpackChunkName: "login_home" */ '@/components/home')
// 组名不同就不会打包成一组

 发布到服务器 在目录中创建一个cert文件夹

首先要导入证书 .pem  和 .key 格式的

在在app.js中 导入包

// 导入 express 模块
const express = require('express')
const http = require('http')
const https = require('https')
const fs = require('fs')
// 创建 express 的服务器实例
const app = express()
//导入Gzip压缩的中间件
const compression = require('compression')

// https 证书相关的文件配置
const options = {
  key: fs.readFileSync('./cert/private.key'),
  cert: fs.readFileSync('./cert/full_chain.pem')
}

// 启用 服务器的 代理模式
app.enable('trust proxy')
app.use('*', (req, res, next) => {
  // 如果请求的协议，是 https 的协议，直接放行
  if (req.secure) {
    return next()
  }
  // 如果请求的不是https的协议，则重定向
  res.redirect(`https://${req.hostname}${req.url}`)
})

// 注册中间件，启用Gzip压缩
app.use(compression())

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

// 调用 app.listen 方法，指定端口号并启动web服务器
// app.listen(80, function() {
//   console.log('Express server running at http://127.0.0.1:80')
// })

// 启用http服务器
http.createServer(app).listen(80, () => {
  console.log('Express server running at http://127.0.0.1:80')
})

// 启用 https 服务器
https.createServer(options, app).listen(443, () => {
  console.log('Express server running at https://127.0.0.1:443')
})

 

https://pm2.keymetrics.io/docs/usage/quick-start/

pm2 ls 查看服务器运行

pm2 - delete -文件名称

cd 指定目录

pm2 start./ app.js--name 自定义名称