vue项目前端优化处理方案整理

vue项目前端优化处理

目录

vue项目前端优化处理

路由懒加载

 按需引入模块

外部资源引入，cdn加载

移除项目中所有的console.log()控制台信息数据打印

是否在构建生产包时生成sourcdeMap 

上传图片文件压缩

开启gizp压缩

前端页面代码优化 

---

路由懒加载

路由懒加载其实很简单，大家都会想到，实现的方式推荐有两种用法：

1.在vue的路由配置文件时加上*webpackChunkName*，在引入组件时候，用chunkName来命名打包js文件的输出的名称 。

router.js文件路由引入：

const routes = [
  {
    path: '/',
    name: '',
    component: () => import(/* webpackChunkName: "login" */ '../components/login'),
    hidden: true,
    meta: {
        requireAuth: false,
        keepAlive: false
    },
  }, 
  {
    path: '/login',
    name: '登录',
    component: () => import(/* webpackChunkName: "login" */ '../components/login'),
    hidden: true,
    meta: {
      r