详解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中使用构造函数实现继承的代码
Aug 12 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
优雅的在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
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python函数的万能参数传参详解
2019/07/26 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
《值日生》教学反思
2014/02/17 职场文书
股权转让协议书
2014/04/12 职场文书
商业融资计划书
2014/04/29 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
护士2014年终工作总结
2014/11/11 职场文书
邀请书格式范文
2015/02/02 职场文书
信息简报范文
2015/07/21 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
MySQL 自定义变量的概念及特点
2021/05/13 MySQL