登录
首屏加载优化
webpack-bundle-analyzer 分析
优化前,加载时间15s,vendor.js 900k app.js 400k 背景图片900k
背景图片png改为jpg从400k变为40k
开启gzip压缩 vue.config.js中设置plugins gzip vendor.js和app.js缩小三分之一(nginx开启gzip gzip_static on;)
config.plugins.push(new CompressionWebpackPlugin({algorithm:'gzip',test:new RegExp('\\.('+productionGzipExtensions.join('|')+')'),threshold:10240,minRatio:0.8}))
cdn加载资源
在vue项目中,通过npm安装到工程中所有的js,css文件,在编译时都会被打包进vendor.js,浏览器在加载该文件后才开始显示首屏。
index.html加载CDN资源
公共配置项webpack.base.conf.js 设置externals
externals:{'vue':'Vue','vue-router':'VueRouter','axios':'axios'}
main.js中 注释掉
import Vue from ‘vue’,
// import iView from ‘iview’;
// import ‘…/theme/index.less’;
需要注意的是,通过 CDN 引入,在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上,因此不再使用Vue.use(xxx)
使用 CDN 的好处有以下几个方面
(1)加快打包速度。分离公共库以后,每次重新打包就不会再把这些打包进 vendors 文件中。
(2)CDN减轻自己服务器的访问压力,并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。
路由懒加载
{path: 'buyerSummary',name: 'buyerSummary',component: () => import('VIEWS/buyer/buyerSummary/index'),},
按需加载
elementui echarts lodash 只加载使用的模块
使用体积更小的第三方插件
moment 替换为dayjs