一、移除打包后的console.log 首先项目完成后肯定要进行打包，但我们再开发过程中会进行很多的日志打印， 为了不让打包后也有这个打印，所以我们要进行移除console.log,但如果我们进行手动 移除，肯定是不行的（浪费时间），所有我们可以用到（babel-plugin-transform-remove-console）这个第三方依赖包（开发依赖） 我们可以在（babel.config.js）这个配置文件，plugins节点中新增"transform-remove-console"
例如：
module.exports = { "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], "transform-remove-console" ] }光这样的话还会产生一个问题，就是你在开发阶段也看不到console.log()了，所以我要还要再进行以下优化，只在发布阶段移除所以我们还要在（babel.config.js）这个配置文件中写一段代码来判断是发布阶段还是开发阶段
例如：
var prodPlugins = [] if (process.env.NODE_ENV == 'production' ) { prodPlugins.push('transform-remove-console') }所以上面的 “transform-remove-console” 就换成 prodPlugins 这个数组并展开。
类如：
module.exports = { "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], ...prodPlugins // 用数组展开 ] }这样就完成了，只会在发布的时候移除console.log()
二、利用vue.config.js修改webpack的默认配置（自定义入口文件） 利用chainWebpack配置不同环境设置不同的入口文件（在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') // 生成的路径 }) } }三、通过cdn加载外部资源 入口文件中通过import导入包的方式，最终都会打包到同一个js文件中，所以导致 chunk-vendors文件体积过大，所以我们我们可以忽略一些文件，不打包（只需要配置发布阶段即可）(以下代码也是在vue.config.js中)
例如:
module.exports = { publicPath: './', devServer: { open: true }, 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', 'vue-quill-editor': 'VueQuillEditor' }) }) // 当前环境为 开发阶段 config.when(process.env.NODE_ENV == 'development',config=>{ config.entry('app').clear().add('./src/main-dev.js') // 生成的路径 }) } }忽略的包在public目录中的index.html中通过cdn资源引入,还有一些在主文件中（main.js）的css也可以在index.html中通过cdn引入
四、根据不同环境定制不同的首页
上面我们已经排除一些包不会进行打包，通过cdn引入资源，但那是在发布阶段，我们开发阶段是不需要那些cdn引入的资源的,所以有可能会有冲突,我们就要进行首页定制了， 我们要在index.html中来判断当前环境为开发阶段还是发布阶段，但是在index.html无法获取到process.env.NODE_ENV，但是index.html中可以获取到htmlWebpackPlugin该插件的配置数据。（以下代码实在vue.config.js中）
例如：
module.exports = { publicPath: './', devServer: { open: true }, 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', 'vue-quill-editor': 'VueQuillEditor' }) // 进行首页定制的代码（给htmlWebpackPlugin添加一个标识，发布阶段为true） config.plugin('html').tap(args => { args[0].isPro = true return args }) }) // 当前环境为 开发阶段 config.when(process.env.NODE_ENV == 'development',config=>{ config.entry('app').clear().add('./src/main-dev.js') // 生成的路径 // 进行首页定制的代码（给htmlWebpackPlugin添加一个标识，开发阶段为false） config.plugin('html').tap(args => { args[0].isPro = false return args }) }) } } // 在index.html页面中通过htmlWebpackPlugin.options.isProd来获取我们定义的标识 // 通过模板语法来进行筛选 // 发布阶段添加cdn，开发阶段不添加 /* <% if(htmlWebpackPlugin.options.isProd){ %> cdn资源文件 <% } %> */五、路由懒加载（路由按需加载） 我们可以通过路由懒加载来进一步优化我们的项目，当匹配某个路由时才去加载对应的资源文件。如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。 安装 @babel/plugin-syntax-dynamic-import（开发依赖）
安装后我们还需要配置babel.config.js文件 如下：
// 如下代码 module.exports = { "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], "@babel/plugin-syntax-dynamic-import" // 配置的插件 ] }所以我们要在路由导入组件的的地方换成另一种写法 如下：
// import login from '../views/login' 这段代码改成下面的代码 // 然后再路由中用login引用该组件 const login = () => import('@/views/login')