优化

升级antd-mobile

antd-mobile由v2升级到v5,修复页面由组件库升级导致的样式问题

删除@sqb/utility

删除@sqb/utility, 手动实现项目中使用的该库的相关方法(该库依赖了v2的antd-mobile, v2和v5有些组件库调用方法不一样, 所以升级antd-mobile, 也要删除该库)

删除bx-ui-mobile

删除bx-ui-mobile组件库, 此组件库底层使用的是v2的antd-mobile

引入whatwg-fetch

由于@sqb/utility中依赖whatwg-fetch,故在项目中使用了whatwg-fetch, 删除@sqb/utility之后,需要引入whatwg-fetch

优化前后分析体积变小(2.04M -> 822KB)

优化前

优化后:

代码分支: optimize-0522-from-4.0.2

优化pdf

pdf.worker.js通过cdn的方式引入,减少包体积

代码分支: pdf-youhua

配置webpack optimization

通过配置optimization, 可进一步减少打包体积,对首屏加载速度也有一定的提高

优化前后构建时间的变化(81s -> 46s)

优化前:优化后:

优化前后网页指标的变化(fcp 5.9s -> 2.6s, lcp 15.1s -> 5.0s)

优化前

优化后

const alias = require('./alias')
const filenames = require('./filenames')
// const externals = require('./externals')
process.env.BROWSER_ROUTER = "true";
const BuildTimeAnalyzerPlugin = require('./BuildTimeAnalyzerPlugin');

module.exports = {

    resolve: {
        alias: alias
    },
    output: {
        publicPath: {
            js: '//j1.58cdn.com.cn/ee/benben/benben_h5',
            css: '//c.58cdn.com.cn/ee/benben/benben_h5',
            img: '//c.58cdn.com.cn/ee/benben/benben_h5',
            media: '//c.58cdn.com.cn/ee/benben/benben_h5'
        },  

        filenames: filenames.prod
    },
    // plugins: [
    //     new BuildTimeAnalyzerPlugin()
    // ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000,       // 提升至30KB防止小文件拆分
            minChunks: 2,         // 至少被引用2次才拆分
            maxAsyncRequests: 6,
            maxInitialRequests: 4, // 移动端建议3-4
            cacheGroups: {
                reactVendor: {
                    test: /[\\/]node_modules[\\/](react|react-dom|react-router)[\\/]/,
                    name: 'vendor-react',
                    chunks: 'all',
                    priority: 20
                },
                utilityVendor: {
                    test: /[\\/]node_modules[\\/](lodash|react-use)[\\/]/,
                    name: 'vendor-utility',
                    chunks: 'all',
                    priority: 15
                },
                picVendor: {
                    test: /[\\/]node_modules[\\/](heic2any)[\\/]/,
                    name: 'vendor-pic',
                    chunks: 'all',
                    priority: 10
                },
                pdfVendor: {
                    test: /[\\/]node_modules[\\/](react-pdf|pdfjs-dist)[\\/]/,
                    name: 'vendor-pdf',
                    chunks: 'all',
                    priority: 10
                },
                // defaultVendors: {
                //     test: /[\\/]node_modules[\\/]/,
                //     priority: 5,      // 提高优先级
                //     name: 'vendors',
                //     reuseExistingChunk: true
                // },
                // 添加公共模块组
                common: {
                    minChunks: 2,
                    name: 'common',
                    chunks: 'initial',
                    enforce: true      // 强制拆分（Webpack 4兼容方案）
                }
            }
        }
    }

    // externals: externals
    // cssModule: {
    //     exclude: ['src/static', 'node_modules'],
    //     name: '[name]__[local]-[hash:base64:5]'
    // }
    // plugins: isAnalyzeMode ? [new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)()] : []
}