Vue项目上线--优化

项目拖了这么久终于差不多要上线了，记录一下Vue项目的一些优化。

1. 去掉打包后的.map文件

运行npm run build后在dist/js文件夹下面会生成.map的文件，打包后的代码都是经过压缩、混淆的，如果代码哪里出错了就很难定位到具体的源代码位置，那么.map文件可以简单理解为还原调试。

可以通过在vue.config.js配置打包时不生成.map文件。

image.png

productionSourceMap: process.env.NODE_ENV === "production" ? false : true,

打包前后对比

2.开启Gzip压缩

什么是Gzip？

首先安装compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

配置vue.config.js`文件

image.png

configureWebpack: () => {
    if (process.env.NODE_ENV === "production") {
      return {
        plugins: [
          new compression({
            test: /\.js$|\.html$|\.css/, //匹配文件名
            threshold: 10240, //超过10k的文件才进行压缩
            deleteOriginalAssets: false //是否删除原文件
          })
        ]
      };
    }
  }

image.png