Vue-Cli项目优化操作的实现

2023-08-10 08:06:04 151

起源

由Vue-Cli（2.X）生成的Vue项目中存在着首屏加载过慢，编译资源过大等问题，主要针对这些问题对项目进行相应的优化，提升项目响应速度，优化项目性能。

操作

路由懒加载

在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片，对当前路由的资源进行一个按需加载。在Vue-cli生成的路由组件引用方法是这样的

importHelloWorldfrom'@/components/HelloWorld'

只需将组件的引用方式改为

constHelloWorld=()=>
import('@/components/HelloWorld')

然后重新编译即可

开启预加载/优先加载

使用webpack插件 PreloadWebpackPlugin进行预加载prefetch和优先加载preload。主要做的是用preload加载vendor、manifest与app三个js而用prefetch去加载所有路由对应的文件。首先要安装插件

npminstall--savepreload-webpack-plugin

在 webpack.prod.conf.js中修改，加入预加载的代码(注意放在 newHtmlWebpackPlugin()的下面)

newPreloadWebpackPlugin({
rel:'prefetch',
}),
newPreloadWebpackPlugin({
rel:'preload',
as(entry){
if(/\.css$/.test(entry))return'style'
return'script';
},
include:['app','vendor','manifest']
})

开启GZip

gzip,使用gzip压缩资源可以更快地加载资源。客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到 content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

启用gzip,在nginx的site-conf中开启gzip

server{
gzipon;
gzip_typestext/xmltext/csstext/plaintext/javascriptapplication/javascriptapplication/x-javascript;
}

webpack处理，需要先安装插件

npminstall--save-devcompression-webpack-plugin

然后在config的index.js中，将productionGzip改为true，开启Gzip压缩。

PS：如果编译报错,则安装 compression-webpack-plugin@1.1.12版本

对第三方工具库进行额外处理

本项目中Vender中主要是Vue,Vue-router,axios等固定依赖的代码,工具库的代码一般不会改动，所以可以将这些工具库的代码抽出来,单独走CDN加载以减少编译JS文件的大小。具体操作:选择相应的工具库版本的cdn,加入到index.html中

之后去到webpack中修改相应的打包配置

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

ps:倘若main.js中有关于公共库的引用请记得清除掉这时再去编译打包就会发现编译的Vender.js小了很多

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue-Cli项目优化操作的实现

热门推荐

随机推荐