首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等 1. vendor.js...优化 由于Vue项目随着功能变多 依赖也会随之变多,减少vendor.js的主要方法就是将其 不打包依赖!!...webpack.base.conf.js , 把需要从cdn方式引入的依赖,都排除掉,包括 iview vue axios 等等 如下图 1.4 最终重新打包 npm run build 可以发现 Vue 的vendor.js...文件确实变小了很多,这样在加载首页的时候 浏览器请求它的时候不会过大 可见vendor.js从 1M多已经减少到 400k了 2.Vue开启Gzip压缩 2.1 config/index.js 开启...QiniuException ex2) { //ignore } } return null; } } 7.总结 本篇主要讲解 Vue项目打包后 vendor.js

    1.5K22

    Vue加载优化,速度提高一倍。

    可以看到,项目中vendor.js文件最大,为 184.9 KB,该文件是Vue打包的时候自动生成的;通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的,如果没有使用可以进行删除。...此外,把鼠标移到某个文件上面,还可以看到提示如果采用 gzip 压缩后的大小,比如vendor.js提示如果采用 gzip 进行压缩,压缩后的大小为61.26 KB,文件变小了,加载速度自然就快了嘛。...vendor.js文件大小为434 KB,耗时1.26秒。 app.js文件大小144 KB,耗时598毫秒。 一张 png 图片大小347 KB,耗时1.51秒。...vendor.js文件大小为131 KB,耗时610毫秒。 app.js文件大小30.7 KB,耗时342毫秒。 图片大小119 KB,耗时241毫秒。

    1.5K20

    Webpack的异步加载原理及分包策略(深度好文,建议收藏)

    component: () => import('@/components/home'), }, ], }) webpack 分包策略 在 webpack 打包过程中,经常出现 vendor.js...看到这两张图的时候,我内心是崩溃的,槽点如下 打包后生成多个将近 1M 的 js 文件,其中不乏 vendor.js 首页必须加载的大文件 xlsx.js 这样的插件没必要使用,导出 excel 更好的方法应该是后端返回文件流格式给前端处理...从这里可以看出我们已经成功把 echart 和 iview 单独抽离出来了,同时 vendor.js 也相应地减小了体积。此外,我们还可以继续抽离其他更多的第三方模块。...这时基本没有打包出大文件了,首页加载需要的 vendor.js 也只有几十 kb,而且我们还可以进一步优化,就是把 vue 全家桶的一些模块再通过 cdn 的方法引入,比如 vue-router,vuex

    4.7K31
    领券