Vue项目优化

对本身项目的一些优化

添加进度条

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

//当用户访问该页面的时候我们需要在用户访问之前开启进度条,在请求结束完成之后我们再隐藏进度条。
//思路:我们通过axios拦截器,我们再服务器发送请求的时候开启进度条,再请求结束的时候我们隐藏进度条
//发送请求
axios.interceptors.request.use(config => {
  NProgress.start() //开启进度条
  config.headers.Authorization = window.sessionStorage.getItem("token")//与进度条无关,这是用来获取token信息。
  return config
})
//请求结束,返回响应
axios.interceptors.response.use(config =>{
  NProgress.done()//隐藏进度条
  return config
})

构建-build

//babel.config.js
//安装插件babel-plugin-transform-remove-console 用来移除所有console信息。
//打开babel.config.js,并输入以下代码


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

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

生成打包报告

在vue可视化面板中点击任务->build>分析查看报告

修改Webpack的默认配置

//vue.config.js
//在根目录中创建vue.config.js
//配置如下:

//entry()找到默认的打包入口
//clear()是删除默认的打包入口
//add()添加新的打包入口
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')
        })
    }
}

在Webpack中我使用的是chainWbepack修改,还有一种方法是configureWebpack,两者的区别是:<br>
chainWebpack可以通过链式编程的形式，修改webpack配置
configureWebpack可以通过操作对象的形式，修改webpack配置

加载外部CDN

//babel.config.js
//在babel.config.js中添加config.set("externals",{})我们一般只加在发布模式当中,发布模式尽量不要存储体积太大的文件,会导致访问缓慢
module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            config.entry('app').clear().add('./src/main-prod.js')

            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_',
                echarts:'echarts',
                nprogress:'NProgress',
                //如果自己有多添加依赖包在这里继续添加。
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

<!-- index.html -->
<!-- 设置完babel.config.js之后需要对发布模式的main.js中将上述提到的包进行删除。我们原来添加的包 -->
<!--打开public/index.html引入外部的CDN,我就举几个例子-->
 <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/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>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>

    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

定制首页内容

//vue.config.js
//为了区分发布模式和生产模式的首页
//在vue.config.js中进行修改
module.exports = {
  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',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
      })

      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-->
<!--在public/index.html中使用表达式进行选择-->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %> 需要引入的CDN <%}%>

懒路由加载

//babel.config
//安装babel/pugin-syntax-dynamic-import
//在babel.config.js中添加 "@babel/plugin-syntax-dynamic-import"
const productPlugins = []
if(process.env.NODE_ENV === 'production'){
  productPlugins.push("transform-remove-console")
}

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

//router.js
//将路由形式修改
//例如
// import Login from './components/Login.vue'修改成
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')