项目上线后首次加载慢的解决方案

1、使用路由懒加载(开发时尽量使用路由懒加载)

component: resolve => require([放入需要加载的路由地址], resolve)

2、使用gzip压缩(最高效,至少压缩一倍)

npm install --save-dev compression-webpack-plugin@1.1.12

在build/webpack.prod.conf.js 文件中添加配置:

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require(compression-webpack-plugin);
// 定义压缩文件类型
const productionGzipExtensions = [js, css];
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
     filename: [path].gz[query],
     algorithm: gzip,
     test: new RegExp(\.( + productionGzipExtensions.join(|) + )$),
     threshold: 10240,
     minRatio: 0.8
   })
)

3、后端端口也需要做好相关配置

# 开启gzip gzip on; # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k; # 设置压缩所需要的缓冲区大小 gzip_buffers 16 64k; # 设置gzip压缩针对的HTTP协议版本 gzip_http_version 1.1; # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间 gzip_comp_level 3; gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png; # 是否在http header中添加Vary: Accept-Encoding,建议开启 gzip_vary on; 4、最后重启下服务就好啦。响应速度加快了10s左右.

经验分享 程序员 微信小程序 职场和发展