Vue-cli上线首屏加载优化
2019/06/22 周六 pm 天气晴 有点小困
记 vue-cli项目首页加载速度慢的有效优化
1.影响加载速度的原因
开始我想把这个锅甩给网速,但我发现一些大商城项目(淘宝,京东),在网速一般的情况下,加载速度依然还是挺快,哎,网速不背这个锅
还是找项目的原因吧,加载时间4.5s
监控首页加载的过程,找到拖后腿的 vendors***.js 这个锅他来背
1.9M 的 js文件下载3.42秒 ,先不说网速,这个js也太TM大了吧
2.分析文件大的原因
利用webpack-bundle-analyzer 分析器,分析项目依赖关系
插件使用:
// 文件路径 build --> webpack.prod.conf.js
//增加以下配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
...
plugins: [
...
new BundleAnalyzerPlugin(),
...
]
添加上面代码之后, 运行打包命令 npm run build,打包成功后会自动弹出 127.0.0.1:8888 像下面一样,看到许多小块,每个小块对应每个模块,小块越大文件越大
看到vendor.js了吗? 这样是不是佷清楚的看到它里面到底都装了什么东西,恍然大悟,对滴, 它装的就是我们项目里应用的依赖
vendor.js 是被 依赖 (第三方库) 充大的 ,所以先检查每个依赖,是否存在引入但没有使用的闲置依赖包
3.项目依赖优化
排除了 闲置依赖包 的存在后,就需要对钢需依赖进行优化
3.1 依赖优化之 CDN 加速
ThinkerK 理解的 CDN加速:将自己的源码跟第三方库代码分离,减小项目体积, 利用别人的服务器去请求第三方库,来减轻自己服务器的压力
针对体积比较大的一些钢需依赖,选择CDN加速的方式(以 echarts 来举例)
- 在 index.html 文件中CDN引入第三方依赖
//index.html <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
- 配置webpack 来分离 echarts webpack/externals使用详解.
//文件路径 build --> webpack.base.conf.js module.exports = { externals: { //externals 里的库不会被webpack打包 echarts: 'echarts', }, }
- 在需要使用依赖的地方 import 进来就可以 ,
再次 npm run build 的时候,echarts 就不会被打包进去, vendor.js的体积就会减小
3.2 依赖优化之 webpack dllplugin
webpack.dll 其实更多是对webpack打包速度的优化,对优化首页加载速度方面效果不是佷明显,所以在这里只提一嘴。 有兴趣的话可以看下 webpack dllplugin的使用
4. gzip暴力压缩
gzip压缩能力很强,压缩力度可达到70%
nginx开启 gzip 模式
server {
listen 8103;
server_name ************;
# 开启gzip
gzip on;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
}
vue开启 gzip
- 安装compression-webpack-plugin
注意这里的版本 @1.1.12 如果不加版本号 在 npm run build 时会报错 因为compression最新版本跟webpack版本不匹配npm i compression-webpack-plugin@1.1.12 --save-dev
- 配置 gzip
//文件路径 config --> index.js build: { // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: true, //之前时false 改为true productionGzipExtensions: ['js', 'css'], }
配置完后的打包效果
浏览器上可以看到gzip
优化后的效果 比之前快4s多 体验一下就上来了