vue上线前项目优化

1.项目优化策略

• 生成打包报告
• 启用第三方cdn
• element-ui按需加载
• 路由懒加载
• 首页内容定制

2.具体优化

2.1 进度条-nprogress

yarn add nprogress

import NProgress from 'nprogress'

// 进度条开始，一般放在请求拦截器中
NProgress.start()

// 进度条结束，放在响应拦截器中
NProgress.done()

2.2 移除console

yarn add ‘babel-plugin-transform-remove-console’ --dev //安装开发依赖

// babel.config.js全局共享

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

if (process.env.NODE_ENV ==='production'){
  prodPlugins.push('transform-remove-console')
}

module.exports = {
    plugins:[
    ...prodPlugins,
    ]
}

2.3 通过vue ui查看生成报告

2.4 指定不同模式打包入口(chainWebpack、configWebpack)

// 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.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

2.5 通过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')

            //cdn加载外部资源,只在生产环境使用
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                echarts: 'echarts',
                nprogress: 'NProgress',
            })
        })

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

// 在public/index.html中添加对应的css以及js标签引用
//例如：<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
//<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

2.6 通过cdn优化element-ui

• 在main-prod.js中，注释掉element-ui按需加载的代码
• 在index.html中加载element-ui的 js 与 css cdn外链

2.7 定制首页

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

    //cdn加载外部资源
    config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        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中判断
//<title><%= htmlWebpackPlugin.options.isProd ? '': 'dev - '%>管理平台</title>

//并通过isProd判断是否加载外部cdn链接
<% if(htmlWebpackPlugin.options.isProd) { %>
    //包裹的内容
<% } %>

2.8 路由懒加载