Vue-Cli项目优化操作的实现
起源
由Vue-Cli(2.X)生成的Vue项目中存在着首屏加载过慢,编译资源过大等问题,主要针对这些问题对项目进行相应的优化,提升项目响应速度,优化项目性能。
操作
路由懒加载
在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片,对当前路由的资源进行一个按需加载。在Vue-cli生成的路由组件引用方法是这样的
import HelloWorld from '@/components/HelloWorld'
只需将组件的引用方式改为
const HelloWorld = () => import ('@/components/HelloWorld')
然后重新编译即可
开启预加载/优先加载
使用webpack插件 PreloadWebpackPlugin 进行预加载prefetch和优先加载preload。 主要做的是用preload加载vendor、manifest与app三个js而用prefetch去加载所有路由对应的文件。 首先要 安装插件
npm install --save preload-webpack-plugin
在 webpack.prod.conf.js 中修改,加入预加载的代码 (注意放在 new HtmlWebpackPlugin() 的下面)
new PreloadWebpackPlugin({ rel: 'prefetch', }), new PreloadWebpackPlugin({ 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 { gzip on; gzip_types text/xml text/css text/plain text/javascript application/javascript application/x-javascript; }
webpack处理,需要先安装插件
npm install --save-dev compression-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中
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> <script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
之后去到webpack中修改相应的打包配置
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' }
ps:倘若main.js中有关于公共库的引用 请记得清除掉 这时再去编译 打包 就会发现编译的Vender.js小了很多
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- vue-cli webpack2项目打包优化分享
- vue-cli2.x项目优化之引入本地静态库文件的方法
- vue-cli项目优化方法- 缩短首屏加载时间
- Vue-cli项目中mockjs + axios实现前后端分离代码demo(清晰易懂)
- vue-cli3 项目从搭建优化到docker部署的方法
- 使用vue-cli 3+构建的vue项目实现保存时按eslint规则自动格式化代码格式
- 详解vue-cli项目开发/生产环境代理实现跨域请求
- vue-cli项目优化,缩短首屏加载时间
- vue-cli项目本地代理实现跨域请求
- vue-cli下的vuex的简单Demo图解(实现加1减1操作)
- vue-cli webpack2项目打包优化
- vue-cli2 构建速度优化的实现方法
- Vue-cli项目中mockjs + axios实现前后端分离代码demo(清晰易懂)
- vue-cli项目配置多环境的详细操作过程
- vue-cli3项目搭建配置以及性能优化
- vue-cli项目优化,缩短首屏加载时间(一)
- 关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程(自用)
- vue-cli项目优化,缩短首屏加载时间
- vue vue-cli webpack打包部署上线前的配置操作,初建vue项目 webpack打包需要注意的配置
- vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component