Vue-cli3.0 项目优化

一. 项目优化策略

生成打包报告
第三方库启用 CDN
ui 组件按需加载
路由懒加载
首屏内容定制

二. 项目添加 nprogress 进度条

安装依赖包

  yarn add nprogress -S

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

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

在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

安装依赖包

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

在 .babelrc 文件中配置 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
  ]
}

四. 生成打包报告

直接在命令行添加参数

  vue-cli-service build --report

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

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

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

cli.vuejs.org/zh/config

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

配置开发入口文件 src/main-dev.js 和发布模式入口文件 src/main-prod.js
通过 configureWebpack 或者 chainWebpack 来修改默认的配置

configureWebpack 通过对象形式操作

chainWebpack 通过链式形式操作

在 vue.congi.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 资源

配置 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',
          axios: 'axios',
          nprogress: 'NProgress',
          moment: 'moment'
        })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
  }

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

www.staticfile.org/

 <!-- 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文件之后，可以直接去掉 按需引入

八. 首页内容定制

配置 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
      })
    })
  }

在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>
  <%}%>

九. 实现路由懒加载

安装依赖包

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

配置 babel.config.js

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

按需加载路由组件

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