项目优化和部署随笔

项目优化策略

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 自定义名称