页面的加载中

页面加载中，如果比较慢，怎么提醒用户体验比较好呢？

public/index.html

    
    
    
    favicon.ico">
    
    
    


    
        We're sorry but  doesn't work properly without JavaScript enabled.
                Please enable it to continue.
    
    
        
            
                
            
            正在努力加载页面，请耐心等候...

script

这里首先校验了页面的 js 是否启用，如果没有启用。则进行提示。

页面的加载

    
        
            
        
        正在努力加载页面，请耐心等候...

打包相关内容参见：

WebPack-01-Quick Start

打包配置

webpack 的配置比较简单：

const CompressionPlugin = require('compression-webpack-plugin')

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
    publicPath: isProd ? '/idrag/' : './',
    configureWebpack: () => {
        if (isProd) {
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
                        threshold: 10240, // 归档需要进行压缩的文件大小最小值，这个对 10K 以上的进行压缩
                        deleteOriginalAssets: false, // 是否删除原文件
                    }),
                ],
            }
        }
    },
}

参考资料

https://blog.csdn.net/m0_60559048/article/details/123359788