Vue项目优化相关策略

1.修改webpack配置项

默认情况下，vue-cli3.0生成的项目，隐藏了所有webpack配置项，目的是为了屏蔽项目的配置过程， 让开发更注定业务逻辑的实现

配置webpack需要通过vue.config.js来配置，需要在项目根目录中创建vue.config.js 文件
（具体配置参考：https://cli.vuejs.org/zh/config/#vue-config-js）

//vue.config.js
//导出包含自定义配置选项的对象
module.exports = {
//自定义配置信息	  
}

2.不同模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用一个打包的入口文件（src/main.js）,将项目的开发过程与发布过程分离，为两种模式，各种指定打包的入口文件

• 开发模式：src/main-dev.js
• 发布模式：src/main-prod.js

2.1.chainWebpack与configureWebpack

在vue.config.js导出的配置对象中，新增chainWebpack与configureWebpack节点，来定义webpack的打包配置

• chainWebpack与configureWebpack的作用相同，唯一区别就是修改webpack配置的方式不同（https://cli.vuejs.org/zh/guide/webpack.html）

• chainWebpack可以通过链式编程的形式，修改webpack配置

• configureWebpack可以通过操作对象的形式，修改webpack配置

2.2.通过chainWebpack自定义打包入口

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

3.路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载，如果将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效

3.1.原始路由写法

import Vue from 'vue'
import Router from 'vue-router'

import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import UserList from './components/user/List.vue'

Vue.use(Router)

const router = new Router({
  routes: [{
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [{
        path: '/welcome',
        component: Welcome
      }, {
        path: '/user/list',
        component: UserList
      }, {
        path: '/role/list',
        component: RoleList
      }]
    }
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

3.2.懒加载

1. 安装 @babel/plugin-syntax-dynamic-import

   https://www.babeljs.cn/docs/babel-plugin-syntax-dynamic-import

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

2. 在babel.config.js配置文件中声明该插件

   // 这是项目发布阶段需要用到的 babel 插件
   const prodPlugins = []
   if (process.env.NODE_ENV === 'production') {
     prodPlugins.push('transform-remove-console')
   }
   
   module.exports = {
     presets: [
       '@vue/app'
     ],
     plugins: [
       [
         'component',
         {
           'libraryName': 'element-ui',
           'styleLibraryName': 'theme-chalk'
         }
       ],
       // 发布产品时候的插件数组
       ...prodPlugins,
       '@babel/plugin-syntax-dynamic-import'
     ]
   }
   

3. 将路由改为按需加载的形式

   import Vue from 'vue'
   import Router from 'vue-router'
   
   const Login = () => import(/* webpackChunkName: "login" */ './components/Login.vue')
   const Home = () => import(/* webpackChunkName: "home" */ './components/Home.vue')
   const Welcome = () => import(/* webpackChunkName: "home" */ './components/Welcome.vue')
   const UserList = () => import(/* webpackChunkName: "user" */ './components/user/List.vue')
   const RoleList = () => import(/* webpackChunkName: "role" */ './views/role/RoleList.vue')
   
   Vue.use(Router)
   
   const router = new Router({
     routes: [{
         path: '/',
         redirect: '/login'
       },
       {
         path: '/login',
         component: Login
       },
       {
         path: '/home',
         component: Home,
         redirect: '/welcome',
         children: [{
           path: '/welcome',
           component: Welcome
         }, {
           path: '/user/list',
           component: UserList
         }, {
           path: '/role/list',
           component: RoleList
         }]
       }
     ]
   })
   
   // 挂载路由导航守卫
   router.beforeEach((to, from, next) => {
     if (to.path === '/login') return next()
     // 获取token
     const tokenStr = window.sessionStorage.getItem('token')
     if (!tokenStr) return next('/login')
     next()
   })
   
   export default router