优化实践
最后更新于：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)
';