优化实践

最后更新于:2022-04-02 05:33:11

[TOC] ## 前言 本文就**vue项目中webpack打包配置(vue-cli构建的项目)下首页加载**可以进行的一些优化进行探索,参考文档来源于各个公众号以及个人总结,希望能在工作中切实的帮到大家提升应用体验。 ## 使用cdn资源 我们基本在项目中会使用一些第三方的ui库或者资源文件,这些在vendor.js中大约占据788k在没有引入其他资源的时候,如果在加入其他的大概会占据1M,这些资源我们可以通过cdn加载的方式请求。国内的CDN服务推荐使用 [BootCDN](https://link.juejin.im/?target=http%3A%2F%2Fwww.bootcdn.cn%2F) 1 index.html中加入cdn引用 ~~~ ~~~ 2 修改 build/webpack.base.conf.js。关于 externals 配置项请自行查阅相关资料。 ~~~ externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT' } ~~~ 3 其他修改 src/router/index.js,src/store/index.js,src/main.js,将引入模块的部分注释 4 重新运行之后发现文件变小,同时cdn资源加载明显优化。 5 这样修改以后,vue的开发工具就不能用了,这时候建议吧externals的配置项单独放到dev以及prod中,两者采用不同的配置文件。 **备注:以上的方案基于请求代价大于下载代价,如果不是这个前提的请谨慎考虑** ## nginx开启gizp(必备) vim打开nginx的配置文件,打开编辑器,找到下面对应的代码段。 vim /usr/local/nginx/conf/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; gzip_vary off; gzip_disable "MSIE [1-6]\." ~~~ 解释如下:第一次需要关注下,之后直接复制粘贴即可。 第1行:开启Gzip 第2行:不压缩临界值,大于1K的才压缩,一般不用改 第3行:buffer,就是,嗯,算了不解释了,不用改 第4行:用了反向代理的话,末端通信是HTTP/1.0,有需求的应该也不用看我这科普文了;有这句的话注释了就行了,默认是HTTP/1.1 第5行:压缩级别,1-10,数字越大压缩的越好,时间也越长,看心情随便改吧 第6行:进行压缩的文件类型,缺啥补啥就行了,JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式就行了 第7行:跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧 第8行:IE6对Gzip不怎么友好,不给它Gzip了 ## vue路由懒加载 ## 异步组件 * 首先把路由组件改装为异步组件,参考[异步组件官方文档](https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6) ~~~ // src/router/index.js export default new VueRouter({ routes: [ { path: '/', name: 'HelloWorld', component: resolve => require(['@/components/HelloWorld'], resolve) } ] }) ~~~ ## webpack DllPlugin webpack提供了一个插件 DllPlugin ,用于将不常变动的js单独打包。具体的设置文档参考掘金的分享:[常用js架包单独打包的配置使用](https://juejin.im/post/5a3251ee6fb9a0450f21f6ac?utm_medium=fe&utm_source=weixinqun) ## 服务端渲染 将需要做的渲染工作在服务端完成,直接返回给浏览器。 ## 按需引入组件 单独页面中需要的组件自行引入即可,不要在公共的main中全量引入。 ## 参考资料 * [掘金单页优化分享](https://juejin.im/post/5a291092518825293b50366d)
';