美文网首页
vue项目打包优化

vue项目打包优化

作者: JuneLau | 来源:发表于2020-01-22 14:25 被阅读0次

前言:
当我们对项目进行打包时,打包后我们可能会发现打的包非常大,我们可以使用路由懒加载的方式,若包仍过大,我们可以采用CDN性能优化的方式,这里主要讲CDN性能优化。

CDN优化第三方包

vue打包时会默认将第三方包的所有css、js文件打包到vendor.js中,所以我们需要将部分大的文件剥离开,使用CDN资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来。
1.在index.html中引入CDN提供的js文件
快速查找CDN网址:https://www.bootcdn.cn/


因为这个项目中引用了骨架屏,所以我是在写骨架屏的html中引用的CDN,(相当于在index.html中引用)

2.全局注释掉相应的所有引用


3.在/build/webpack.base.js中添加配置externals对象
key:要引入的资源名称 value:模块提供给外部引用的名称
在externals对象中添加的表示不会在node_modules中再加载

(element-ui(key)表示 import ElementUi from “element-ui”
ElementUi(value))
再次打包会发现打的包会小很多,若不知道什么文件占据体积过大使用CDN资源,可以利用矩阵图查看

利用插件查看项目的打包情况及体积大小(矩阵图)

1.下载插件
npm intall webpack-bundle-analyzer --save-dev
2.在webpack.prod.js中配置
(开发环境可以不注释,但在生产环境中需注释掉)


3.在package.json中添加配置

4.开始构建
npm run analyz
(构建完成会自动在浏览器打开矩阵图)

相关文章

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • 博客网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • vue项目打包优化

    前言:当我们对项目进行打包时,打包后我们可能会发现打的包非常大,我们可以使用路由懒加载的方式,若包仍过大,我们可以...

  • Vue 项目打包优化

    一、路由懒加载:分割代码块 二、webpack 打包生成 .gz 文件(gzip压缩) 三、CDN 四、去掉所有的...

  • Vue项目打包优化

    目的 缩小项目打包体积,提高页面加载速度 分析产生效果慢的原因 我们先来分析下前端加载速度慢原因 首先安装webp...

  • Vue 的打包优化之路

    Vue的打包优化之路 场景分析 一个结构简单 依赖蛮多的可视化项目,用到的库有 vue + vue-router ...

  • 14 -vue 打包图片路径错误解决

    一、构建 VUE 项目 直接用官网的方式建立vue 项目 二、打包 VUE 项目 2.1 打包项目介绍 会在项目...

  • 2019-05-10

    vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画 当打包构建应用时,Javascript...

  • vue项目webpack打包优化

    一,配置resolve.mudules resolve.mudules原理 resolve.modules告诉 w...

网友评论

      本文标题:vue项目打包优化

      本文链接:https://www.haomeiwen.com/subject/zkbuzctx.html