1 项目优化

1.1 项目优化策略

（1）生成打包工具（2）第三方库启用CDN （3）Element-UI组件按需加载（4）路由懒加载（5）首页内容定制

1.2 通过nproress添加进度条

使用步骤: (1)安装nprogress

npm install nprogress --save

(2) 在main.js中导入nprogress和样式

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

（3）在请求拦截器中展示进度条，表示请求开始，在返回请求拦截器中隐藏进度条，表示请求结束

/ 在request拦截器中展示进度条，Nprogress.start()
axios.interceptors.request.use(config => {
        // console.log(config);
        Nprogress.start()
        config.headers.Authorization = window.sessionStorage.getItem('token')
            // 在最后必须return config
        return config
    })
    // 在response拦截器中隐藏进度条,Nprogress.done()
axios.interceptors.response.use(config => {
    Nprogress.done()
    return config
})

效果图：

进度条效果.gif

1.3在执行build期间移除所有的console（babel-plugin-transform-remove-console插件）

（1）安装babel-plugin-transform-remove-console依赖

npm install babel-plugin-transform-remove-console --save

(2)然后在babel.config文件中加入transform-remove-console

（3）再次执行npm run build就可以了

1.3.1只在发布阶段移除所有的console

1.4 生成打包报告（两种方法）

1.5 通过vue.config.js修改webpack的默认配置

1.6 通过chainWebpack自定义打包入口

在vue.config中配置

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

            
        })
    }
}

1.7 通过externals加载外部CDN资源（主要目的就是减小打包体积）

也是在vue.config

module.exports = {
    css: {
        extract: false
    },
    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',
                'vue-quill-editor': 'VueQuillEditor'
            })

        })

        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-dev.js')

          
        })
    }
}