Vue项目优化随笔

vue 版本：3.0

@vue/cli 版本：5.0

项目优化整体策略

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

具体实施

设备适配

　　淘宝的适配方案 （推荐使用）

　　1，安装依赖包

npm i lib-flexible -S   
npm i postcss-px2rem -S  

yarn add lib-flexible -S  
yarn add  postcss-px2rem -S  

　　2，在入口文件（main.js）中引入

import 'lib-flexible'

　　3，在vue.config.js 文件中配置 css 属性

module.exports = {
    pluginOptions:{
        css: {
            loaderOptions: {
                css: {},
                postcss: {
                    plugins: [
                        require('postcss-px2rem')({
                            remUnit: 37.5
                        })
                    ]
                }
            }
        }
    }
}

 

项目添加 nprogress 进度条

　　1，安装依赖包

  npm i nprogress -S 
  yarn add nprogress -S 

　　2，在入口文件中导入包和样式

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

 

生成打包报告

　　1，直接在命令行添加参数

  vue-cli-service build --report

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

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

vue ui

 

为开发模式和发布模式设置不同的打包入口

　　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', {
             vant: 'vant',
          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')
    })
  }

　　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', {
            vant: 'vant'
          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，安装依赖包

npm i @babel/plugin-syntax-dynamic-import -D 
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')