优化 Vue 项目编译文件大小

转载自  优化 Vue 项目编译文件大小

与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不多的。

定位问题

要想进行优化,首先我们得清楚问题所在。即:是哪些代码/依赖包导致最后的编译文件过大?

这里,我们需要使用 webpack-bundle-analyzer 工具。修改 package.json 文件,添加:

"analyze": "NODE_ENV=production npm_config_report=true npm run build"

然后执行:

npm run analyze

便会在浏览器中打开一个页面,展示编译后的文件大小及各部分内容大小。以下是项目在优化前的分析结果:

从图中可以看出,最后编译出的 vendor.js 文件达到了 5MB,其中主要来自 echarts。此外,由于 element-ui 在使用时已经注意到按需加载组件,所以可优化的部分不多;而 lodash 由于没有按需加载,所以成为需要优化的另一个核心部分。

使用按需加载优化

这里主要是对 lodash 进行优化。当我们在使用 lodash 时,如果使用:

import _ from 'lodash'_.get(obj, 'key', 'default_value')

这种方式的话,则在编译时会默认将 lodash 的全部内容进行编译打包。

webpack 的介绍中确实提到了按需加载,但这个概念可能会出现理解上的偏差,下面我们举例说明:

// 方法一:会导致加载全部的 lodash 库
import _ from 'lodash'
_.get()// 方法二:只会加载其中的 get 方法
import get from 'lodash/get'
get()

即在不添加其他插件和配置的情况下,webpack 还做不到如此智能。

想要实现在使用方法一的情况下,也能按照我们使用过的方法真正「按需加载」,则需要使用插件并添加配置:

首先执行:

npm i --save-dev babel-plugin-lodash babel-cli babel-preset-es2015

然后修改 .babelrc

{"plugins": ["lodash"],"presets": ["es2015"]
}

之后修改 webpack.prod.conf.js

module: {loaders: [{'loader': 'babel-loader','test': /\.js$/,'exclude': /node_modules/,'query': {'plugins': ['lodash'],'presets': ['es2015']}}]
}

这之后便可以实现按需加载 lodash 了。重新进行分析,会发现 lodash 部分的大小已经可以忽略不计了。

对于其他的,如 Element-UI 之类的第三方库,如果我们只使用到了为数不多的组件,建议查找相应的按需加载插件和配置方式,这样可以极大的减少该部分编译的大小。

路由懒加载

当我们配合 Vue-Router 构建单页应用时,大量的组件会导致首屏加载缓慢,如官方文档所言:

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

只需将原有的:

import Test from '../pages/test'export default new Router({routes: [{path: '/test',name: 'test',component: Test}]
});

改为:

const Test = () => import('../pages/test')export default new Router({routes: [{path: '/test',name: 'test',component: Test}]
});

注意首行的不同。

第三方库懒加载

在实际开发中,可能存在这样的场景:

在某个组件/文件中需要使用 moment 第三方库来进行时间处理,但其他组件根本用不到。

如果我们这样引入 moment:

import moment from 'moment'export default {data () {},mounted () {}
}

则该库会合并在 vendor.js 中,造成首屏加载缓慢。

为了解决这个问题,我们可以改成以下引入方式:

export default {name: '',beforeCreate () {import('moment').then(module => {this.moment = module;});},data () {return {moment: null}}
}

这种方式可以使得 moment 库只在该组件使用处引入。注意,这种方式需要考虑「moment 调用时机与 moment 使用的先后问题」。

注:如果该组件是页面级别的组件,则使用「路由懒加载」中的方法就可以了。

使用 CDN 外部加载

如上所示,echarts 模块占了很大的部分,由于没有找到 echarts 按需加载的插件,这里我们通过外部引用的方式来减少编译的大小。

首先,我们修改 index.html,从 CDN 中引入 echarts 文件:

<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>

注意,如果需要地图组件,也需要一并引入。

这之后我们需要删除所有 import echarts from 'echarts' 的代码,即不再通过这种方式引入 echarts。

但问题来了,如果这么做的话,webpack 在打包的时候会发现 echarts 变量不存在而停止编译。解决办法是,我们需要在 webpack 配置中告知编译器,对于 echarts 变量使用了引入外部资源的方式。需要修改 webpack.base.config.js

module.exports = {externals: {"echarts": "echarts"},
}

这之后我们便可以直接使用 echarts 这一变量而不会导致编译错误了。

当我们将所有采用之前方式引入 echarts 的代码删除或注释之后,再次进行分析,会发现编译大小少了很多。

经过以上两步,原本 5M 的编译文件变为了 1.67 M。

这之后,我们还可以根据分析结果,针对性地进行优化。如更换时间库为更轻量级的 spacetime 等。

服务器端开启 gzip

使用 gzip 可以进一步压缩文件,使得服务器传递给浏览器的文件是经由压缩之后的,待浏览器收到之后再解压缩。要使用这一方式,需要服务器端的支持,这里以 Nginx 为例。

在 nginx.conf 中,添加如下配置:

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
gzip_vary off;

之后刷新页面( 注意禁用缓存 ),观察 js、css 等资源文件的请求中是否包含 Content-Encoding: gzip,如果存在,则表明 gzip 已成功。

注意,在 gzip_types 中规定了哪些请求类型会使用 gzip 进行压缩。对于没有使用 gzip 的资源文件,可将其 Content-type 类型加入 gzip_types 之中。

服务器端渲染

注意,在以上对打包过程的优化中,受影响的主要是 vendor.js 文件中第三方库的部分( gzip 方法会影响全部资源文件 )。

如果我们想继续进行优化,就需要考虑服务器端渲染了。

Vue 的作用机制实际是使用 js 向 html 中挂载组件,如果我们能够将这一过程放在服务器端进行,就可以不再向浏览器传输一部分驱动文件,从而进一步减少浏览器所需的文件大小。不过这一过程需要服务器的额外支持,有兴趣的同学可以参考:实例 PK ( Vue服务端渲染 VS Vue 浏览器端渲染 )。


参考

  1. 实例 PK ( Vue服务端渲染 VS Vue 浏览器端渲染 ) - segmentfault
  2. 使用vue-cli生成的vendor.js文件太大,有办法减少体积吗? - segmentfault
  3. Webpack 打包优化之体积篇
  4. babel-plugin-lodash
  5. Nginx开启Gzip压缩大幅提高页面加载速度 - 博客园
  6. Nginx启用Gzip压缩js无效的原因 - 博客园
  7. Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办? - 博客园
  8. Webpack 打包优化之速度篇
  9. 开启gzip 如果浏览器端不支持解压 页面会怎么样? - 知乎
  10. 如何写一手漂亮的 Vue

莉莉安 · 3月23日

楼主~
您的第三方库懒加载方式
我按照引入后,在页面中写此组件,会报错说没有注册该组件

  回复

有具体一点的使用方式吗

— 莉莉安 · 3月23日

对于某库(如 moment)采用懒加载的引入方式时,需要在真正使用时等待该库文件已经下载到浏览器。比如:

export default {name: '',beforeCreate () {import('moment').then(module => {// 这一过程会导致该库文件从远程开始下载,只有下载完成才能使用该库// 可以打开浏览器的 network 看到这一过程this.moment = module;});},data () {return {// 初始化时该值为空// moment 懒加载中该值也为空// 只有当懒加载完成才有值moment: null}}
}

使用这种方式加载第三方库,需要手动判断懒加载是否完成。如果觉得麻烦,可以直接借助路由懒加载。被纳入路由懒加载的组件,其引用的第三方库也会随之实现懒加载。

— dailybird 作者 · 3月23日

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/327788.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mybatis反向生成实体类、dao层以及映射文件

在做项目的时候&#xff0c;我们不得不写底层的一些繁琐代码&#xff0c;比如说实体类、dao层之类的&#xff0c;既浪费时间又费事&#xff0c;最主要的是还没效率&#xff0c;kuangkuangkuang的写半天终于写完了&#xff0c;到运行的时候dao层的代码居然还报错&#xff01;&am…

ASP.NET Core 1.1 简介

ASP.NET Core 1.1 于2016年11月16日发布。这个版本包括许多伟大的新功能以及许多错误修复和一般的增强。这个版本包含了多个新的中间件组件、针对Windows的WebListener服务器、Razor视图编译以及Azure相关的特性。要将现有项目更新到ASP.NET Core 1.1 &#xff0c;您需要执行以…

Mybatis传入参数类型为ListIntergert作为条件进行查询

Mybatis传入参数类型为List作为条件进行查询 higher2017关注 2017.02.07 10:23:16字数 130阅读 5,658 表结构&#xff1a; 表名称为constant 需求&#xff1a; 现在想查询type为2、3的所有数据&#xff08;甚至想查询type为1,2,3,4,5....,100的所有数据&#xff09;并且返回…

lombok进行有参无参构造出现的问题

查看方法 解决方法 运行成功

.NET应用迁移到.NET Core(三)从商业角度看移植过程

2016年12月1日下午微软技术大会Microsoft Ignite China&#xff0c;有幸和大家分享一门课程&#xff0c;课程信息如下&#xff0c;欢迎大家到时来捧场。本文介绍下从商业角度看移植过程。 。 创建项目移植进度表 创建移植进度表时要考虑所有可能的风险&#xff0c;包括技术和商…

Spring(笔记)

简介 Spring概述 简介 Spring : 春天 —>给软件行业带来了春天 2002年&#xff0c;Rod Jahnson首次推出了Spring框架雏形interface21框架。 2004年3月24日&#xff0c;Spring框架以interface21框架为基础&#xff0c;经过重新设计&#xff0c;发布了1.0正式版。 很难想象…

mybatis报错Type interface xxx.Dao is not known to the MapperRegistry

今天在做mybatis的时候&#xff0c;遇到一个错误&#xff0c;大家看看这个错误吧&#xff1a;org.apache.ibatis.binding.BindingException: Type interface cn.mybatis_chop10_1.dao.IEmpDao is not known to the MapperRegistry. 我前找找后找找&#xff0c;就是找不出来&…

Navicat Premium 11 12 闪退

卸载有道词典 重新安装 Navicat Premium 11

java弹弹球实验报告_Java弹球游戏实验报告—chen

Java弹球游戏实验报告—chen 课 程 设 计 报 告 题 目 弹球小游戏 姓 名 方成 学 号 20 专 业 java 指导教师 陈华恩 2013年 12 月 30 目录 一、实验目的2 二、需求分析2 三、实验任务2 1、设计3 2、程序要求&#xff1a;3 3、选作题&#xff1a;3 四、开发工具与平台3 五、设计…

.NET应用迁移到.NET Core(二)风险评估

2016年12月1日下午微软技术大会Microsoft Ignite China&#xff0c;有幸和大家分享一门课程&#xff0c;课程信息如下&#xff0c;欢迎大家到时来捧场。本文介绍下应用迁移的风险评估。 很多移植项目超出预算或未能按时完成&#xff0c;主要是因为没有很好地管理移植过程中可能…

.NET应用迁移到.NET Core(一)

2016年12月1日下午微软技术大会Microsoft Ignite China&#xff0c;有幸和大家分享一门课程&#xff0c;课程信息如下&#xff0c;欢迎大家到时来捧场。本文介绍下应用迁移的一个过程。 把一个运行在某个操作系统和硬件结构上的软件&#xff0c;在另一个操作系统和硬件结构上重…

WIN10的IE错误代码inet_e_resource_not_found解决办法

WIN10的IE错误代码inet_e_resource_not_found解决办法 原创 候鸟307183846 最后发布于2019-08-27 13:31:54 阅读数 2413 收藏 展开 解决方案&#xff1a; 1、在Internet选项里&#xff0c;点《连接》标签&#xff0c;按下《局域网设置》按钮&#xff0c;在对话框里&#…

404问题

、配置Tomcat 启动测试&#xff01; 可能遇到的问题&#xff1a;访问出现404&#xff0c;排查步骤&#xff1a; 查看控制台输出&#xff0c;看一下是不是缺少了什么jar包。如果jar包存在&#xff0c;显示无法输出&#xff0c;就在IDEA的项目发布中&#xff0c;添加lib依赖&…

@Valid注解的使用---SpringMvc中的校验框架@valid和@validation的概念及相关使用

https://www.cnblogs.com/charlypage/p/9385146.html 第5章—构建Spring Web应用程序—关于spring中的validate注解后台校验的解析 关于spring中的validate注解后台校验的解析 在后台开发过程中&#xff0c;对参数的校验成为开发环境不可缺少的一个环节。比如参数不能为null&…

java中的AIO

转载自 java中的AIO简介jdk7中新增了一些与文件(网络)I/O相关的一些api。这些API被称为NIO.2&#xff0c;或称为AIO(Asynchronous I/O)。AIO最大的一个特性就是异步能力&#xff0c;这种能力对socket与文件I/O都起作用。AIO其实是一种在读写操作结束之前允许进行其他操作的I/O…

Mybatis+MySQL动态分页查询数据经典案例(含代码以及测试)

最近在用Mybatis做项目的时候遇到了不少问题&#xff0c;今天我就在这和大家分享一下&#xff0c;稀稀拉拉的研究了两天&#xff0c;终于搞好了&#xff01; 开发人员&#xff1a;1111 开发软件&#xff1a;Myeclipse 用到的框架技术&#xff1a;Mybatis 数据库&#xff1a;MyS…

细说ASP.NET Core静态文件的缓存方式

一、前言 我们在优化Web服务的时候&#xff0c;对于静态的资源文件&#xff0c;通常都是通过客户端缓存、服务器缓存、CDN缓存&#xff0c;这三种方式来缓解客户端对于Web服务器的连接请求压力的。 本文指在这三个方面&#xff0c;在ASP.NET Core中静态文件的实现过程和使用方法…

金田项目的总结

一个搜索框对手机、姓名、内容进行搜索 <select id"list" parameterType"java.lang.String" resultMap"BaseResultMap">select<include refid"Base_Column_List"/>from user_backstagewhere 11 and is_deletedN<if te…

文章中文字乱码问题解决办法集合

乱码问题 测试步骤&#xff1a; 1、我们可以在首页编写一个提交的表单 <form action"/e/t" method"post"><input type"text" name"name"><input type"submit"> </form>2、后台编写对应的处理类 …

.NET开源两年之后社区贡献如何

微软在 2014 年开源了 .NET 核心框架&#xff0c;欢迎社区贡献代码。2015 年&#xff0c;一位 .NET 开发者分析了开源一年之后的社区贡献。2016 年年底又到了&#xff0c;这位开发者再次发表文章&#xff0c;分析了 .NET 开源两年之后的情况。 这一次他分析了 15 个 .NET 开源项…