文档章节

关于vue的webpack打包优化问题

Smallwei小伟
 Smallwei小伟
发布于 2017/12/01 16:46
字数 656
阅读 2748
收藏 10

vue是一个单例页面,所有页面都是由js动态渲染,因此js的体积会越来越大,从而影像页面的渲染性能

1.异步组件

    官方推出了异步组件路由,是一个解决js打包后体积过大问题的方案,可以很好的吧vue组件按组区分,从而打出不同的js文件,解决了单一js打包大的问题。

以下是一个异步组件打包的最终文件

后面的数字为hash值,为了js不会缓冲

app为vue以及vue-router等第三方库的额外配置代码

vendor为第三方库插件的本身代码

mainfest为第三方库runtime代码

数组部分就是不同分组的异步打包文件(几个组就有几个js文件)

官方异步组件传送门

注意:千万不要把js的组件分的颗粒度很小,js文件多了也会影响效率,浏览器加载js的线程一般为4-5个

2.webpack打包配置

    第三方库文件可以使用第三方的cdn,从而减少了vendor的体积大小。

    webpack的打包忽略第三方库的配置 (webpack.base.conf.js)

    

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex',
  'axios': 'axios',
  'element-ui':'ELEMENT',
}

    要是内网环境下,你又懒得搭建cdn,就把相应的库文件下载到本地来使用,像往常一样引入html里就可以

本地库文件

引入html文件

	<body>
		<div id="app">
			<!--vue-ssr-outlet-->
		</div>
		<script src="/static/cdn/vue/2.5.2/vue.min.js" charset="utf-8"></script>
		<script src="/static/cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script>
		<script src="/static/cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
		<script src="/static/cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
		<script src="/static/cdn/element-ui/2.0.5/index.js" charset="utf-8"></script>
	</body>

bootcdn官方传送门

实验证明方法可以减少60%的体积文件,渲染速度大大提升

3.SSR

ssr就是把前端的渲染改成又后台直接渲染,将渲染好的页面直接呈现给客户,此方法可用于网站的百度推广和seo优化有重大的意义。

常用的后台渲染框架有nuxtjs

4.项目拆分

一个项目中的不同模块拆分出来,都可以独立成vue项目,采用iframe标签进行跳转,验证方面你可以制作一个公用的js验证库与服务端进行交互。(有个类似于后台微服务的体系)

此方法还在实验阶段,只是个人的想法

以上就是最近vue项目的上线后打包优化遇到的问题。

© 著作权归作者所有

共有 人打赏支持
Smallwei小伟
粉丝 16
博文 12
码字总数 7496
作品 1
集宁
程序员
webpack dll打包重复问题优化

关于webpack dll的使用,我这里不做过多介绍,网上都有,一撸一大把,今天我要说的是在使用dll plugin过程中出现的一个包依赖问题,这个问题导致打出来的包会包含重复的代码。 优化背景 最近...

Jooger
10/09
0
0
使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。 在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,...

一个敲代码的前端妹子
05/16
0
0
基于webpack4搭建vue2、vuex多页应用

背景 最近在对公司的H5项目做重构,涉及到构建优化,由于一些历史原因,项目原先使用的打包工具是饿了么团队开发的 cooking(基于 webpack 做的封装,目前已停止维护了。)如果继续使用,一是...

Youngbo
07/31
0
0
为我们的 Vue SSR程序添加热更新功能

前沿 通过上一篇文章 通过vue-cli3构建一个SSR应用程序 我们知道了什么是SSR,以及如何通过vue-cli3构建一个SSR应用程序。但是最后遗留了一些问题没有处理,就是没有添加开发时的热更新功能,...

lentoo
今天
0
0
面试官:请手写一个webpack4.0配置

确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,...

hello等风来
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Snackbar源码分析

目录介绍 1.最简单创造方法 1.1 Snackbar作用 1.2 最简单的创建 1.3 Snackbar消失的几种方式 2.源码分析 2.1 Snackbar的make方法源码分析 2.2 对Snackbar属性进行设置 2.3 Snackbar的show显示...

潇湘剑雨
16分钟前
1
0
分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储

分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储 摘要: 原创出处 http://www.iocoder.cn/Elastic-Job/job-storage/ 本文基于 Elastic-Job V2.1.5 版本分享 1. 概述 本文主要分享...

DemonsI
22分钟前
1
0
jmockit demo

1、@Mocked,标识一个指定的class的实例或被测对象的参数被Mock掉。 2、@Capturing,标识一个被Mock的对象,从该对象派生的子类也被Mock了。 3、@Injectable,标识只有一个指定的被测对象的内...

我的老腰啊
36分钟前
1
0
内容换行

用 <textarea>13611112222 这里想换行 13877779999</textarea><textarea>13611112222 13877779999</textarea>...

小黄狗
37分钟前
1
0
学习设计模式——单例模式

1. 认识单例模式 1. 定义:一个类中仅有一个实例,并提供一个访问它的全局访问点。 2. 结构:仅一个Singleton类,其中包含一个static类变量,而类变量的类型就是Singleton类,而且Singleton...

江左煤郎
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部