vue 项目优化

1.gzip压缩

gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip 压缩效率非常高，通常可以达到 70% 的压缩率，也就是说，如果你的网页有 30K，压缩之后就变成了 9K 左右

在项目中使用gzip压缩的方法如下

首先安装compression-webpack-plugin插件

$ npm install compression-webpack-plugin -D

然后在vue.config.js配置文件中书写你的代码

const webpack = require("webpack")
const CompressionWebpackPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ["js", "css"]

module.exports = {
  configureWebpack: (config) => {
  	const plugins = []
  	//start 生成gzip压缩文件
  	plugins.push(
	  // Ignore all locale files of moment.js
	  new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),

	  // 配置compression-webpack-plugin压缩
	  new CompressionWebpackPlugin({
	  	algorithm: "gzip",
	  	test: new RegExp("\\.(" +productionGzipExtensions.join("|") + ")$"),
	  	threshold: 10240,	//对10K以上的数据进行压缩
	  	minRatio: 0.8,
	  }),
	  new webpack.optimize.LimitChunkCountPlugin({
		maxChunks: 5,
		minChunkSize: 100,
	  })
	)
	//end 结束生成gzip压缩文件
	config.plugins = [...config.plugins, ...plugins]
  }
}

2.打包不生成map文件
map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

那么在项目打包时我们是可以设置不生成map文件的，因为map文件会使得我们的打包文件大很多

不生成map文件配置如下

module.exports = {
  productionSourceMap: false,
}

工具推荐
推荐一个插件工具，让你能够直观的看到自己的项目大小，这样你就能够知道自己在进行项目优化的时候可以有针对性的对某一部分进行优化啦

这个插件工具可以直接在项目中使用npm进行安装

$ npm install webpack-bundle-analyzer -D

持续更新