vue-cli3 热部署踩坑记录（部署慢、debugger无效、文件保存浏览器不自动刷新）

1. 踩了个什么坑？

换了个项目进行开发，然后这个前端vue项目部署贼慢，修改一个文件保存部署也贼慢，部署后浏览器不自动刷新，debugger还用不起。开发时，这坑能让人等出暴躁症出来， 如图：

~

2. 问题首先定位在vue.config.js中的热部署

首先考虑的是“修改一个文件保存部署贼慢，部署后浏览器不自动刷新”，这个影响最大。
项目中 vue.config.js中配置如下：

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '' : '',
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 移除 preload 插件
    config.plugins.delete('preload')
  },
  configureWebpack: config => {
    config.performance={
      hints:'warning',
      //入口起点的最大体积 整数类型（以字节为单位）
      maxEntrypointSize: 50000000,
      //生成文件的最大体积 整数类型（以字节为单位 300k）
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
          return assetFilename.endsWith('.js');
      }
    }
    // 开发环境不需要gzip
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionWebpackPlugin({
          // 正在匹配需要压缩的文件后缀
          test: /\.(js|css|svg|woff|ttf|json|html)$/,
          // 大于10kb的会压缩
          threshold: 10240
        })
      )
    }
    // 是否开启分析
    if (process.env.npm_config_report) {
      config.plugins.push(new BundleAnalyzerPlugin())
    }
  },
  transpileDependencies: [
    'vue-echarts',
    'resize-detector',
    'ec-ui'
  ],

  productionSourceMap: false,
  css: {
    sourceMap: false,
    extract: true
  }
}

查看资料都是在说css热部署：

const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)

module.exports = {
	…………………………
	css: {
		// 是否使用css分离插件 ExtractTextPlugin
		extract: IS_PROD,
		// 开启 CSS source maps?
		sourceMap: false
	}
}

对于extract属性，项目里已经用的true，不再需要IS_PROD变量的判断了。
有点懵，将上个项目的配置copy过来试了下，还是不行（上个项目没这些问题）。
这时候，特么的真懵了。问题不在vue.config.js这个文件，不想信这个邪……

死马当活马的心态，把配置改成变量试了下。
配置修改如下：

const IS_PROD = ['production','development'].includes(process.env.NODE_ENV)

module.exports = {
	…………………………
	css: {
		// 是否使用css分离插件 ExtractTextPlugin
		extract: IS_PROD,
		// 开启 CSS source maps?
		sourceMap: false
	}

结果自然是不言而喻，还是失败了。

~

3. 排除法定位到问题（有点笨，但是很管用的一种方法）

在注释掉了[process.env.NODE_ENV === ‘production’]才会进行压缩的这段配置后，OK了。

	// 开发环境不需要gzip
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionWebpackPlugin({
          // 正在匹配需要压缩的文件后缀
          test: /\.(js|css|svg|woff|ttf|json|html)$/,
          // 大于10kb的会压缩
          threshold: 10240
        })
      )
    }

问题来了：服务启的是开发环境的配置，和这有关！?
结果：

// 开发环境配置
NODE_ENV = production

开发环境配置的变量值，竟然是生产环境的名称，真特么让人有点方……
最终：vue.config.js不用改，开发环境.env.dev中的变量NODE_ENV的值改为‘development’。
结果如图：

~

4. 总结

这是一个因为开发环境的节点名称（NODE_ENV）和生产环境节点名称定义成一样后，引起项目部署时进行了gzip打包，导致部署时间贼长，尤其是热部署的时间贼长，而且热部署后不刷新浏览器页面，debugger还无效的故事。

gzip打包后会打包成 .gz文件，导致热部署时间长，不能自动刷新浏览器页面，不能debugger。

~
参考：
热部署：https://www.bbsmax.com/A/x9J2vyaeJ6/
vue加载缓慢原因及解决方案：https://www.cnblogs.com/zhangning187/p/vueyouhua.html