介绍
今天就跟大家聊聊有关如何打包压缩Vue项目,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>一、路由懒加载:分割代码块
Vue支持异步组件,即可以在使用组件的地方使用一个承诺,承诺最终会通过解决回传一个组件对象。而webpack的动态进口的方式可以让代码分块进行打包,并且返回一个承诺(正是异步组件所需要的)。在路由配置表里使用进口可以将各个页面组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就避免将所有内容打包在一个块里,从而“按需加载”,大大提高响应速度。
没有使用动态加载的路由配置方式:
//, router.js
import VueRouter 得到& # 39;vue-router& # 39;
import Vue 得到& # 39;vue # 39;
Vue.use (VueRouter)
import Home 得到& # 39;@/页面/回家# 39;
import Tree 得到& # 39;@/页面/树# 39;
import SearchHighlight 得到& # 39;@/页面/SearchHighlight& # 39;
import Watermark 得到& # 39;@/页面/水印# 39;
export default new VueRouter ({
,路线:[
{才能
,,,路径:& # 39;/& # 39;
,,,组件:回家,
,,,孩子们:[
,,,{
,,,,路径:,& # 39;树# 39;
,,,,名字:,& # 39;树# 39;
,,,,组件:树
,,,},
,,,{
,,,,路径:,& # 39;search-highlight& # 39;
,,,,名字:,& # 39;SearchHighlight& # 39;
,,,,组件:SearchHighlight
,,,},
,,,{
,,,,路径:,& # 39;水印# 39;
,,,,名字:,& # 39;水印# 39;
,,,,组件:水印
,,,}
,,,)
,,}
,)
}) 执行纱构建(或npm运行构建)打包,查看dist文件夹下的js和css:
可以看到打包后js和css下各有两个文件,其中chunk-vendors文件包含了所有页面js或者css文件,大小分别为769 k, 270 k。现在修改路由配置使用动态加载组件的方式打包,来看一下打包的文件是怎样的。
使用()=比;进口(& # 39;xxx # 39;)的形式引入组件:
//, router.js
import VueRouter 得到& # 39;vue-router& # 39;
import Vue 得到& # 39;vue # 39;
Vue.use (VueRouter)
export default new VueRouter ({
,路线:[
{才能
,,,路径:& # 39;/& # 39;
,,组件:,(),=祝辞,进口(& # 39;@/页面/回家# 39;),
,,,孩子们:[
,,,{
,,,,路径:,& # 39;树# 39;
,,,,名字:,& # 39;树# 39;
,,,,组件:,(),=祝辞,进口(& # 39;@/页面/树# 39;)
,,,},
,,,{
,,,,路径:,& # 39;search-highlight& # 39;
,,,,名字:,& # 39;SearchHighlight& # 39;
,,,,组件:,(),=祝辞,进口(& # 39;@/页面/SearchHighlight& # 39;)
,,,},
,,,{
,,,,路径:,& # 39;水印# 39;
,,,,名字:,& # 39;水印# 39;
,,,,组件:,(),=祝辞,进口(& # 39;@/页面/水印# 39;)
,,,}
,,,)
,,}
,)
}) 执行纱构建(或npm运行构建)打包,查看dist文件夹下的js和css:
js和css文件夹下各多出来了4个块- *文件,刚好对应我们动态引入的4个组件,这样在我们访问到某个页面,才会加载页面对应的块- * . js和块- * . css。观察文件大小,核心的js文件chunk-venders大小从769 k降低到725 k了,因为我的4个页面代码都非常简单,看起来优化效果不大,然而在一个页面很多的大型项目中,优化效果会非常明显,css部分也是如此。
<强>二、压缩请求资源
<强> 1。原理介绍
日常我们在使用网盘的时候,上传一个很大的文件夹肯定很慢,这时候我们会把它压缩成一个压缩包,需要下载的时候下载下来解压就可以了,这样大大节省了上传和下载的时间。同样的原理可以用于网络请求,当我们向服务器请求一个资源时,比如js或者css文件,服务器将文件压缩,然后返回到浏览器,浏览器操作解压之后即可使用。
首先浏览器在发送请求的时候,会通过请求头接受编码告知服务器,本浏览器支持哪些编码格式的资源。打开浏览器的网络,查看当前网页的某个请求的请求头:
接受编码的值表示浏览器支持gzip生成的编码格式或者缩小压缩算法生成的编码格式,这就告诉服务器,如果可以把该请求的资源用这两个方法压缩一下给我也是可以的.Accept-Encoding可能还会有压缩压缩,身份不压缩的默认格式。
