Vue-前端优化

最新推荐文章于 2024-06-24 13:19:18 发布

笛梵

最新推荐文章于 2024-06-24 13:19:18 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签：前端 vue

本文链接：https://blog.csdn.net/zx654729069/article/details/124229387

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue-前端优化

一、添加进度条效果

1.安装

npm install --save nprogress

2.导入

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

3.使用

直接调用 start()或者done()来控制进度条。

NProgress.start();
NProgress.done();

4.例子

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'
.....
//请求在到达服务器之前，开启进度条
axios.interceptors.request.use(config => {
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})

二、开发阶段和发布阶段

//开发阶段
process.env.NODE_ENV === 'development'
//发布阶段
process.env.NODE_ENV === 'production'

1.修改webpack的默认配置

默认vue生成的项目会隐藏了webpack配置项，如果需要配置webpack
需要通过vue.config.js来配置。

vue.config.js

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            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')
        })
    }
}

三、加载外部CDN

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中，导致该js文件过大
可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中

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

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

2.删除引入代码，加载外部cdn

main-prod.js 删除默认引入代码
public/index.html 添加外部cdn

四、定制首页内容

开发环境的首页和发布环境的首页展示内容的形式有所不同，
如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现

1. 使用插件

vue.config.js

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                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=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

2.判断环境，定制首页内容

在public/index.html中使用插件判断是否为发布环境并定制首页内容

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>
  .......

五、定制首页内容

1.安装

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

2.声明插件

babel.config.js

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
 ......
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
     .......
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3.路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
// import Login from './components/Login.vue'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Home.vue')
// import Home from './components/Home.vue'
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Welcome.vue')
// import Welcome from './components/Welcome.vue'
const Users = () => import(/* webpackChunkName:"user" */ './components/user/Users.vue')
// import Users from './components/user/Users.vue'

笛梵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-前端优化

Vue-前端优化一、添加进度条效果1.安装npm install --save nprogress2.导入//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'3.使用直接调用 start()或者done()来控制进度条。NProgress.start();NProgress.done();4.例子//导入进度条插件import NProgress from '
复制链接

扫一扫