• 欢迎光临~

Vue-项目优化

开发技术 开发技术 2022-05-31 次浏览

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')
程序员灯塔
转载请注明原文链接:Vue-项目优化
喜欢 (0)