vue项目首屏加载慢性能优化（打包文件chunk |
您所在的位置：网站首页 › cydia加载太慢 › vue项目首屏加载慢性能优化（打包文件chunk |
vue项目首屏加载慢性能优化（打包文件chunk
|
在做vue项目中，遇到首屏加载慢，发现chunk-vendors文件过大，这个chunk-vendors主要是打包的是第三方库资源 如果Vue、elementui、axios、echarts、moment等 从两方面进行有话 1.gzip压缩 因为浏览器是认识gz文件， 使用gzip压缩 大概可以压缩至50%左右。 我这边设置 只有生产环境才使用gzip压缩，用了compression-webpack-plugin这个插件 // vue.config.js文件 const CompressionWebpackPlugin = require('compression-webpack-plugin') module.exports = { configureWebpack: (config) => { // 开发环境不需要gzip if (process.env.NODE_ENV !== 'production') return // 以下代码是生产环境 // 生产环境需要gzip config.plugins.push( new CompressionWebpackPlugin({ // 正在匹配需要压缩的文件后缀 test: /\.(js|css|svg|woff|ttf|json|html)$/, // 大于10kb的会压缩 threshold: 10240 }) ) }有了这个配置还不行 需要在nginx上配置才能让浏览器识别gz文件 只需要加一个 gzip_static on;就可以了 server { listen 80; server_name localhost; location / { root dist; index index.html index.htm; gzip_static on; } }2.利用webpack的外部扩展，使用cdn引入第三方库，这样webpack就不会将其打包 我这边也是区分的开发环境不是用cdn，只有生产环境才使用cdn 我这边是将echarts和moment是用cdn, 主要echarts太大，使用分析软件有3M大 // vue.config.js文件 module.exports = { // 测试环境开启sourceMap 正式环境关闭 productionSourceMap: process.env.VUE_APP_CURRENTMODE === 'test', configureWebpack: (config) => { if (process.env.NODE_ENV !== 'production') return // 外部扩展 cdn引入第三方包 不打包进去 config.externals = { moment: 'moment', echarts: 'echarts' } },使用以上两方面的优化， 首屏明显加载很快 直接上图 优化前 |
优化后 
【本文地址】
今日新闻 |
推荐新闻 |