SPA(单页应用)首屏加载速度慢怎么解决

1.减少入口文件体积

2.静态资源本地缓存(合理利用localstorage,sessionStorage)

3.UI框架按需加载

4.图片压缩(可以使用iconfont)

5.组件重复打包

在webpack的config文件中,修改commonsChunkPlugin的配置

minChunks:3

表示使用三次及以上就抽离出来,放进公共依赖文件,避免重复加载组件

6.开启gZip压缩

安装:

npm i compression webpack plugin -D

打开vue.config.js引入并修改webpack配置

const CompressionPlugin = require("compression-webpack-plugin");
configureWebpack: (config) => {
  if (process.env.NODE_ENV === "production") {
    //生产环境修改配置
    config.mode = "production";
    return {
      plugins: [
        new CompressionPlugin({
          //匹配文件名
          test: /\.js$|\.html$|\.css/,
          //对超过10k的数据进行压缩
          threshold: 10240,
          //是否删除源文件
          deleteOriginalAssets: false,
        }),
      ],
    };
  }
};

在服务器也需要配置,如果发送请求的浏览器支持gzip,就发送给它gzip格式的文件,如果服务器用express搭建的,可以安装compression

const compression = require('compression));
//在中间件使用之前调用
app.use(compression );

7.使用SSR

建议使用Nuxt.js框架实现服务端渲染