[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引用 ~~~ <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script> ~~~ 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)