使用场景：目前这个项目要嵌入到APP中使用，项目用到router、vuex、axios等目前现状：首次加载非常缓慢，等待时间超过8秒钟
我们目的：减少包体积、减少http请求次数，同时保证代码可用性、维护性、不变动业务代码
路由按需加载
webpack默认将所有js源代码打包成一个js文件，导致JS包会变得非常大，影响页面首次加载速度
按需加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件的js文件
const home = () => import('@views/home/home') // 或者 const home = (resolve) => { import('@views/home/home').then((module) => { resolve(module) }) }
部分走CDN
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。如果公司没有考虑CDN，可以酌情将例如 vue vux vue-router 等不变动的资源使用第三方免费 CND 引入，并添加本地 fallback
//在vue.config.js中配置 configureWebpack: config => { if (isProd != 'development') { config.externals = { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', } } } 在public/index.html <body> <div id="app"></div> <% if (VUE_APP_ENV != "development") { %> <!-- 运行时依赖 --> <script src="//cdn.staticfile.org/vue/2.5.17/vue.runtime.min.js" type="text/javascript"></script> <script src="//cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js" type="text/javascript"></script> <script src="//cdn.staticfile.org/vuex/3.0.1/vuex.min.js" type="text/javascript"></script> <script> // 当cdn资源失效时，加载本地资源 window.Vue || document.write('<script src="./vue.min.js"><\/script>'); </script> <% } %> </body>
nginx压缩
目前有两种压缩方式，nginx压缩，客户端打包压缩在上传
1.nginx压缩
客户端啥都不用做直接上传打包的代码即可
就是每次请求时服务器先压缩再返回资源，对服务器性能有一定消耗
nginx.conf文件 http{ #开启服务端压缩-损耗服务器cpu gzip on; #开启gzip gzip_min_length 10k; #设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小 gzip_buffers 4 16k; #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存 gzip_comp_level 3; #压缩级别，1-10，数字越大压缩的越好，也越占用CPU gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; #制定压缩的类型,线上配置时尽可能配置多的压缩类型! gzip_vary on; #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩 gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持） }
2.客户端打包压缩在上传
在打包是需要配置vue.config.js //需要安装 npm i compression-webpack-plugin -D const CompressionWebpackPlugin = require('compression-webpack-plugin'); if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.(js|css)$/,// 匹配文件名 threshold: 10240, // 对超过10k的数据压缩 deleteOriginalAssets: false, // 不删除源文件 minRatio: 0.8 // 压缩比 }) ] } }
打包出来的可能会带有.gz的文件夹
nginx配置一句话即可
nginx.conf文件
http{ gzip_static on; #静态压缩 }
nginx设置缓存
#server模块一般对应在相对应的xxx.conf中,不建议都写在nginx.conf中 server{ location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { access_log off; expires 30d; // 天 } location ~* ^.+\.(css|js|txt|xml|swf|wav)$ { access_log off; expires 24h; // 小时 } location ~* ^.+\.(html|htm)$ { expires 1h; } }
实际效果
chunk-vendors.js可能会比较大，3M左右，开启压缩只剩下1M
上传代码到服务器打开浏览器测试,在公司wifi测试下，整个加载过程不超3秒
