vue项目优化1

项目优化策略 1.生成打包报告

1.1：使用vue ui命令打开vue ui界面，点击 任务》build运行，看看有哪一些警告，

1.2： 依赖项的容量太大了，如element ui 等，可以优化一下

1.3：优化项目的打开速度

2.第三方库启用cdn（减少百分之30的体积）

通过externals加载外部的cdn资源

1.在一个根目录下创建文件夹为vue.config.js

2.在vue.config.js配置开发和发布2个文件的入口路径，发布的入口是./src/main-prod.js， 开发的入口是./src/main-dev.js，入口不在是main.js，所以需要把main.js复制多一个，2个都分别修改为上面的入口文件

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

3.使用externals时，打包工程中不会把第三方资源进行打包，访问是通过cdn，这样大大减少了项目的体积， 还是在vue.config.js里的发布模式配置

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',
                'vue-quill-editor': 'VueQuillEditor',
            })
        })
        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

4.在public里的index.html引入cdn，把项目使用的第三方资源都通过cdn引入,查找cdn路径www.bootcdn.cn/ cdn引入的版本也要跟项目的一致，不然会报错

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.cjs.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.10/vue-router.cjs.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

需要在public/index.html添加cdn

element ui cdn引入

优化前

优化后

1.需要在public/index.html添加cdn

<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/locale/zh-TW.min.js"></script>
 <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet">
 

2.删除掉main-prod.js发布入口文件里面的所有引入element ui的代码

添加进度条

1.安装nprogress

npm install --save nprogress

2.在封装的axios请求里面引入

//导入NProgress包对应的js和css，进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.在instance.interceptors.response.use拦截器中展示进度条NProgress.start()

// 在request中展示进度条NProgress.start()
    NProgress.start()

4.在instance.interceptors.response.use隐藏进度条NProgress.done()

NProgress.done()  //隐藏进度条