项目上线前的优化

项目上线前的优化

1. 根目录下新建vue.config.js，配置开发模式和发布模式的打包入口文件。src文件夹下新建main-prod.js和main-dev.js。复制main.js到这2个文件中。删除main.js。
2. 在vue.config.js中添加externals， 删除main-prod.js（发布阶段）中对应的css样式表，在index.html中添加相应的css连接和js连接（cnd资源），来减少打包时的体积。

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      //   添加externals
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

3. 注释掉main-dev.js里导入element-ui的语句，在index.html里导入element-u的css和js的cnd,来减轻依赖体积。
4. 首页优化：在vue.config.js里声明参数isProd,再根据isProd是否为true来确定如何渲染首页
   
   
5. 路由懒加载：当路由被访问时才加载对应的路由文件，就是路由懒加载。
   路由懒加载实现步骤：
   1.安装 @babel/plugin-syntax-dynamic-import
   打开vue控制台，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import
   点击安装。

2.在babel.config.js中声明该插件，打开babel.config.js

3.组件分组：替换路由格式。

5.开启gzip压缩，加快速度。

6. 配置https服务器
   
   

7. pm2管理项目