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标签引用 //例如： //

2.6 通过cdn优化element-ui

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

// 发布模式 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中判断 //<%= htmlWebpackPlugin.options.isProd ? '': 'dev - '%>管理平台

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

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

})