Vue项目代码优化,提高网页加载速度。
一、在编译时不生成.map文件,减少webpack打包后的压缩文件,提高首页编译速度。修改config/index.js文件:productionSourceMap: false二、开启Gzip压缩1、修改config/index.js文件:productionGzip: true,开启Gzip压缩 。productionGzip: true,productionGz...
一、在编译时不生成.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
更全的优化方案点这里
更多推荐
所有评论(0)