Vue项目优化策略之webpack为开发模式和发布模式指定不同打包入口

这里可以发现好几个问题：
1.看到依赖项占比整个项目的大小非常大导致访问速度比较慢

2.这个js文件非常大

可以这样配置：

把项目中的main.js改名main-dev.js,全选代码，新建一个平级的main-prod.js文件，粘贴代码：

这样main-dev.js就作为项目开发入口，main-prod.js就作为项目的发布入口，我们来设置vue.config.js配置文件：

const {
    
     runInContext } = require("lodash")

module.exports = {
    
    
  chainWebpack: config => {
    
    
    // 如果当前环境是production
    config.when(process.env.NODE_ENV === 'production', config => {
    
    
      // 通过entry方法找到app的入口文件,清空入口文件,把指定的production环境的入口文件main-prod.js添加进去
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 如果当前环境是development
    config.when(process.env.NODE_ENV === 'development', config => {
    
    
      // 通过entry方法找到app的入口文件,清空入口文件,把指定的development环境的入口文件main-dev.js添加进去
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

保存配置，在项目目录运行

vue-cli-service serve --mode development --dashboard

或者更简单的，我们回到vue CLI页面在开发环境重新编译：

发现没有任何问题

再看看build阶段有没有问题，运行命令：

 vue-cli-service build --mode production --target app --dashboard

或者直接在vue CLI页面运行：

也没有问题