项目优化|前端项目首屏加载优化--页面初始进来加载速度慢的解决方案 javascript|vue.js|nginx|webpack|vue

首屏加载优化–页面初始进来加载速度慢的解决方案 1、 Nginx开启gzip静态资源压缩编辑nginx配置文件 nginx.conf 找到如下代码并更改如下：

gzip on; # 开启压缩 gzip_min_length 1k; # 设置压缩最小单位，小于不压缩 #gzip_disable "msie6"; # gzip_vary on; # gzip_proxied any; gzip_comp_level 4; # 压缩比 gzip_buffers 4 16k; gzip_http_version 1.1; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 压缩内容

2、Webpack配置代码分割
【项目优化|前端项目首屏加载优化--页面初始进来加载速度慢的解决方案】webpack给出了智能分割代码的功能：splitChunks，可以用给定的策略去抽取公共代码，避免重复。详细的可以看webpack的官方文档（https://webpack.docschina.org/guides/code-splitting/#splitchunksplugin），提供了详细的配置！

/** * 分割打包代码，防止重复打包以及打包大小过大 */ module.exports = function (config) { config.merge({ optimization: { minimize: true, splitChunks: { chunks: 'all', minSize: 10, minChunks: 1, automaticNameDelimiter: '.', cacheGroups: { vendors: { name: 'chunk-vendors', chunks: 'all', test: /[\\/]node_modules[\\/](@ant-design|moment)[\\/]/, priority: 13 }, 'brace-index': { name: 'brace-index', chunks: 'all', test: /[\\/]node_modules[\\/](brace)[\\/]index.js/, priority: 12 }, 'axios': { name: 'axios', chunks: 'all', test: /[\\/]node_modules[\\/](axios)[\\/]/, priority: 12 }, 'ant-design-vue': { name: 'ant-design-vue', chunks: 'all', test: /[\\/]node_modules[\\/](ant-design-vue)[\\/]/, priority: 12 }, common: { minChunks: 2, priority: 10, chunks: 'all', reuseExistingChunk: true } } } } }) }

3、按需加载

按需引入所需第三方依赖，而不是全量注册，全量注册会导致打包的时候，将多余的代码一起打包到项目中，造成文件过大！
异步路由（路由懒加载），通过异步组件加载方式，按需加载当前路由所需的文件！
去除没用的依赖；避免类似作用的多种依赖包使用，例如使用了Element UI又使用Antd、同时使用了less和scss，类似的第三方依赖起到的作用是一样的，引入进来可能你觉得很方便，但是如果都使用了，到最后开发越来越多，不仅仅打包体积大和慢，跑起来开发更加慢，严重影响开发效率！

4、尽量功能开发减少代码量

公共方法封装：类似的处理逻辑等代码应该封装成公共方法调用，重复使用。
抽离公共的组件。

5、前端的资源动态加载
a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。
b. 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。
c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy来开启懒加载模式。
6、Webpack引入CDN资源
配置webpack的externals，如下：