一、vue.config.js 按需创建
指定不同的打包入口 ，并创建不同入口文件
chainWebpack: config => {
// 判断当前模式 进行不同操作
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear.add('./src/main_pro.js')
})
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear.add('./src/main_dev.js')
})
}
上线模式下配置externals加载外部CDN（同时在index.html引入CDN）https://www.bootcdn.cn/
config.set('externals',{
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
lodash:'_',
echarts:'echarts',
nprogress:'Nprogress',
'vue-quill-editor':''
})
上线模式添加变量 index.html用htmlWebpackPlugin.options.isProd进行接收选择加载文件或标题
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
二、babel.config.js中配置
配置打包需要用到的插件 同时yarn add 进行下载(（babel-plugin-transform-remove-console)去除console调试）
const prodPlugins = [] //项目发布阶段需要用的插件
if(process.env.NODE_ENV === 'production'){
prodPlugins.push('transform-remove-console')
}
module.export = {
plugins:[ ...prodPlugins ]
}
三、使用路由懒加载 提高项目运行效率
安装插件 @babel/plugin-syntax-dynamic-import
在babel.config.js中配置
plugins:[ ...prodPlugins ，'@babel/plugin-syntax-dynamic-import']
路由文件中替换掉用import引入的路由
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
