大厂的vue项目是如何优化的？

1、项目优化–进度条添加

• 安装nprogress，ui界面依赖安装依赖，搜索nprogress进行安装即可，或者使用命令安装

npm i nprogress

或

yarn add nprogress

• 在main.js中导入进度条组件

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'

• 利用NProgress.start()显示进度条
  在请求拦截器中添加

axios.interceptors.request.use(function(config){
  config.headers.Authorization=window.sessionStorage.getItem('token')
  Nprogress.start()
  return config;
},function(error){
  console.log(error)
}) 

• 利用NProgress.done()隐藏进度条
  在响应拦截器中添加

axios.interceptors.response.use(res=>{
  Nprogress.done()
  return res
})

2、移除打包之后的console

项目打包就不讲了，ui界面或者命令都可，命令如下

npm run build 或者 yarn build

• 安装babel-plugin-transform-remove-console

• 在label.config.js文件中的plugins节点下新增"transform-remove-console"

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    "transform-remove-console"
  ]

开发阶段我们还是需要console，那我们就只在发布阶段移除console

• 利用process.env.NODE_ENV判断当前是发布是开发阶段

  var prodPlugins = []
  
  if(process.env.NODE_ENV == 'production'){
    prodPlugins.push('transform-remove-console')
  }

• 利用展开运算符将数组里面的插件交给plugins

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...prodPlugins
  ]

3、自定义入口文件

利用vue.config.js修改webpack的默认配置

• 创建vue.config.js文件

• js内部暴露出一个配置对象

module.exports = {
  
}

• 利用chainWebpack配置不同环境设置不同的入口文件

chainWebpack:config=>{
    // 当前环境为 发布阶段
    config.when(process.env.NODE_ENV == 'production',config=>{
      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')
    })
  }

4、通过cdn加载外部资源

• 因为入口文件中通过import导入包的方式，最终都会打包到同一个js文件中，所以导致chunk-vendors文件体积过大

• 既然这些文件都打包到同一个js文件里体积过大，所以忽略一些js文件不打包(只需要配置发布阶段即可)

  //使用externals设置排除项
  config.set('externals',{
    vue:'Vue',
    'vue-router':'VueRouter',
    axios:'axios',
    lodash:'_',
    echarts:'echarts',
    nprogress:'NProgress',
    'vue-quill-editor':'VueQuillEditor'
  })

• 虽然忽略了一些js文件，但是在入口文件中还有一些css文件体积也比较大，所以直接将引入的css删除

  // 富文本编辑器
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  //导入进度条样式
  import 'nprogress/nprogress.css'
  

• 将上面css删除后不打包，最终的样式肯定会有问题，所以我们在public中index.html中引入cdn的资源文件

  <!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css"/>
  <!-- 富文本编辑器 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
  

• 对应的js文件我们也忽略了没有打包，所以也是直接在public中index.html中引入cdn的资源

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- 富文本编辑器的 js 文件 -->
  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
  

配置element-ui的cdn资源

• 删除入口文件中的按需导入的elemen.js

• 导入element的cdn资源

  <!-- element-ui 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
  <!-- element-ui 的 js 文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
  

• 因为把element的按需引入注释或删除了，我们在里面向全局挂载了一些方法也失效了

import  { Message,MessageBox } from "element-ui"
Vue.prototype.$mg = Message
Vue.prototype.$cfm = MessageBox.confirm

5、根据不同环境定制不同的首页内容

• 如果是发布阶段，我们给htmlWebpackPlugin添加一个标识

//使用插件
config.plugin('html').tap(args=>{
  //添加参数isProd
  args[0].isProd = true
  return args
})

• 如果是开发阶段也添加一个标识

//使用插件
config.plugin('html').tap(args=>{
  //添加参数isProd
  args[0].isProd = false
  return args
})

• 在页面判断该标识为true还是false，如果是true代表发布阶段，应该添加cdn资源，如果是false不需要添加

<% if(htmlWebpackPlugin.options.isProd){ %>
cdn资源文件
 <% } %>

也可将标题一起修改了

<title><%= htmlWebpackPlugin.options.isProd ? '':'dev - ' %>后台管理系统</title>

6、实现路由懒加载

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

• 安装 @babel/plugin-syntax-dynamic-import

• 配置babel-plugins

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...prodPlugins,
    "@babel/plugin-syntax-dynamic-import"
  ]

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

const Foo = () => import('./Foo.vue')

路由配置如下

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

我们也可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中，Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')