Vue项目代码优化，提高网页加载速度。

一、在编译时不生成.map文件，减少webpack打包后的压缩文件，提高首页编译速度。

修改config/index.js文件：

productionSourceMap: false

二、开启Gzip压缩

1、修改config/index.js文件：productionGzip: true,开启Gzip压缩 。

productionGzip: true,
productionGzipExtensions: ['js', 'css' ,'svg'],

2、官方提示"Before setting to `true`, make sure to: npm install --save-dev compression-webpack-plugin"，所以productionGzip: true之后需要下载安装compression-webpack-plugin。即执行：npm install --save-dev compression-webpack-plugin

 3、请确保项目里的Webpack版本在v4.0.0以上才能支持compression-webpack-plugin。

4、如果安装compression-webpack-plugin报如下错误：

 运行npm run build 报如下错误：

这是因为执行npm install --save-dev compression-webpack-plugin时下载的是最新的compression-webpack-plugin版本，compression-webpack-plugin版本太高了，要在package.json文件里把版本改低一点。

5、然后运行npm run dev,npm run build就可以了。开启Gzip压缩配置之后，执行build指令之后，会多出一些.gz文件，这些就是压缩之后的文件。

 

压缩之前的vendor.js文件有1.54MB,app.js有2.25MB,app.css有455KB,chartiq.js有1.83MB;

压缩之后的vendor.js文件有476KB,app.js有294KB,app.css有92.4KB,chartiq.js有439KB。

 

注意

1、开启Gzip压缩需要后端配合，服务端也要使用gzip的压缩方式。

 查看浏览器是否支持gzip压缩方式：Content-Encoding:gzip

 

更全的优化方案点这里