vue项目优化，缩小打包体积，router优化 gzip压缩

文章目录

config.when( process.env.NODE_ENV === ‘production’， config => {
config.entry('app').clear()/.add('./src/main-prod.js)
})

1 when () 判断处于什么开发模式
2 process.env.NODE_ENV 获取当前开发模式

配置cdn资源 减小打包体积

一. 配置不需要打包依赖

config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'vant': 'vant',
      'echarts': 'echarts',
      'videojs': 'videojs',
      // 'qq': 'qq',
      // 'wx': 'wx',
      // 'callapp-lib': 'CallApp',
      // 'lodash': '_',
      // 'element-ui': 'ELEMENT',
      // 'xlsx': 'XLSX'
    }

二. 删除main.js 中导入的js、css 文件 在index.html中 通过cdn方式引入对应css、js文件

ElementuUI 优化

router 优化–懒加载

一. 在babel.config.js 中声明路由懒加载

二. 将组件导入模式改为
Home => 导入后的组件名
Home_login => 放的位置
./components/Home.vue => 导入组件路径

const Home = () => import(/* webpackChunkName: "Home_login"*/ './components/Home.vue')

项目上线配置

gzip 压缩

管理服务器