详解vue-cli 3.0 build包太大导致首屏过长的解决方案


Posted in Javascript onNovember 10, 2018

前言:最近用vue-cli 3.0 构建一个小型的工单管理系统,完工后build发现一个chunk-vendors包就达到985kb,加上其他一些资源文件,首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢!

根据首屏加载资源文件过大,进行一下优化:

1. 路由懒加载

结合Vue的异步组件再结合webpack的代码分割,我们可以轻松的实现路由懒加载。

vue-cli 3.0 模式就使用了Babel,我们需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

// 安装插件 syntax-dynamic-import
cnpm install --save-dev @babel/plugin-syntax-dynamic-import

// 修改babel.config.js
module.exports = {
 "presets": [
  "@vue/app"
 ],
 "plugins": [
  [
   "component",
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
   },
   "syntax-dynamic-import"
  ]
 ]
}

// 修改路由组件的加载(router/index.js)
{
 path: '/',
 name: 'home',
 component: resolve => require(['pages/Home'], resolve)
}

使用了路由懒加载,已经把原来的chunk-vendors降到了789kb,但加载789kb还是太大。那继续优化

2. 服务器开启Gzip

Gzip是GNU zip的缩写,顾名思义是一种压缩技术。它将浏览器请求的文件先在服务器端进行压缩,然后传递给浏览器,浏览器解压之后再进行页面的解析工作。在服务端开启Gzip支持后,我们前端需要提供资源压缩包。

通过CompressionWebpackPlugin插件build提供压缩

// 安装插件
cnpm i --save-dev compression-webpack-plugin

// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';

.....
module.exports = {
....
 configureWebpack: config => {
  if (isProduction) {
   config.plugins.push(new CompressionWebpackPlugin({
    algorithm: 'gzip',
    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    threshold: 10240,
    minRatio: 0.8
   }))
  }
 }
}

现在我们看一下build后的压缩包的大小,大概减少了三分之二

详解vue-cli 3.0 build包太大导致首屏过长的解决方案

3. 启用CDN加速

用Gzip已把文件的大小减少了三分之二了,加载速度从之前2.7秒多到现在的1.8秒多,但这个还是得不到满足。那我们就把那些不太可能改动的代码或者库分离出来,继续减小单个chunk-vendors,然后通过CDN加载进行加速加载资源。

// 修改vue.config.js 分离不常用代码库
module.exports = {
 configureWebpack: config => {
  if (isProduction) {
   config.externals = {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'moment': 'moment'
   }
  }
 }
}
// 在public文件夹的index.html 加载

<!-- CND -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

现在再build后看下大小和访问速度:

详解vue-cli 3.0 build包太大导致首屏过长的解决方案

CDN优化后.jpg

可以看到chunk-verdors 又减少了114kb,通过CDN加载整个文档速度已经接近1秒。

4. 修改uglifyOptions去除console来减少文件大小

// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev

// 修改vue.config.js
 configureWebpack: config => {
  if (isProduction) {
   .....
   config.plugins.push(
    new UglifyJsPlugin({
     uglifyOptions: {
      compress: {
       warnings: false,
       drop_debugger: true,
       drop_console: true,
      },
     },
     sourceMap: false,
     parallel: true,
    })    
   )
  }
 }

如果代码中打了很log,这个优化还是有点效果的。

总结

首屏优化工作告一段落,通过以上四项的优化,已经很大的提升了首屏的加载速度。如果想再进一步优化还是空间的,例如从代码层面去减少代码量(代码复用率)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript中的作用域
Apr 07 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
js中unicode转码方法详解
Oct 09 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 #Javascript
Vue组件之单向数据流的解决方法
Nov 10 #Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 #Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 #Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 #Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 #Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 #Javascript
You might like
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php生成无限栏目树
2017/03/16 PHP
来自qq的javascript面试题
2010/07/24 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python包和模块的分发详细介绍
2020/06/19 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
工商管理毕业生推荐信
2013/12/24 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
思想品德自我评价
2014/02/04 职场文书
党员评议思想汇报
2014/10/08 职场文书
干部个人考察材料
2014/12/24 职场文书
市级三好学生评语
2014/12/29 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
学雷锋感言
2015/08/03 职场文书
Python装饰器的练习题
2021/11/23 Python