Vue项目优化

一. 项目优化策略

1. 第三方库启用 CDN

2. ui 组件按需加载

3. 路由懒加载

4. 首屏内容定制

5. gzip 开启

二. 项目添加 nprogress 进度条

1. 安装依赖包

  npm i nprogress -S 

2. 在main.js 中导入依赖包和样式

  import NProgress from 'nprogress' 
  import 'nprogress/nprogress.css'

3. 在axios请求拦截器和响应拦截器中配置启动和结束

// axios 请求拦截
axios.interceptors.request.use(function (config) {
  NProgress.start()
  return config
})

// axios 响应拦截
axios.interceptors.response.use(function (response) {
  NProgress.done()
  return response
})

三. 自动移除 console.log

1. 安装依赖包

  yarn add babel-plugin-transform-remove-console -D 

2. 在 .babelrc | babel.config.js 文件中配置 plugins 插件

const prodPlugins = []
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  'presets': [
    '@vue/app'
  ],
  plugins: [
    [
      'import',
      {
        'libraryName': 'vant',
        'libraryDirectory': 'es',
        'style': true
      },
      'vant'
    ],
    ...prodPlugins
  ]
}

四. 通过可视化的 ui 面板查看报告（推荐）

在可视化的ui面板中，通过控制台和分析面板， 可以方便的查看存在的问题

五. vue-cli3.0 webpack全局配置 vue.config.js

https://cli.vuejs.org/zh/config

六. 为开发模式与发布模式设置不同的打包入口

1. 配置开发入口文件 src/main-dev.js 和发布模式入口文件 src/main-prod.js

2. 通过 configureWebpack 或者 chainWebpack 来修改默认的配置

configureWebpack 通过对象形式操作

chainWebpack 通过链式形式操作

3. 在 vue.config.js 文件中通过 chainWebpack 修改入口文件

module.exports = {
  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')
    })
  }
}

七. 通过 externals 加载外部 CDN 资源

1. 配置 vue.config.js

chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      config
        .set('externals', {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          'element-ui': 'elementUi',
          axios: 'axios',
          nprogress: 'NProgress'
        })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
  }

2. 在 index.html 文件中引入 CDN服务依赖文件

<!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
  <!-- vant 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css">

  <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>
  <!-- nprogress 的 js 文件 -->
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- moment 的 js 文件 -->
  <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
  <!-- vant 的 js 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>

  ps: vant ui  引入CDN文件之后，可以直接去掉 按需引入

八. 首页内容定制

1. 配置 vue.config.js

chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // 配置入口文件
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      // 配置CDN
      config
        .set('externals', {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          nprogress: 'NProgress',
          moment: 'moment'
        })
      // 配置首页定制
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
      // 配置首页定制
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }

2. 在index.html中通过流程控制 是否加载CDN资源

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>mall-vue</title>
  <% if(htmlWebpackPlugin.options.isProd){ %>
  <title>vue-ssr</title>
  <!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />

  <!-- vant 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css">

  <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>
  <!-- nprogress 的 js 文件 -->
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- moment 的 js 文件 -->
  <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
  <!-- vant 的 js 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>
  <%}%>

九. 实现路由懒加载

1. 安装依赖包

yarn add @babel/plugin-syntax-dynamic-import -D 

2. 配置 babel.config.js

  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]

3. 按需加载路由组件

const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')