原因

以前的老项目屎山代码堆一块了，最近实在无法忍受了， 加载一个页面需要十几秒 ， 客户还能坚持用着 实在是很佩服

第一次解决

排查原因发现，加载某一个chunk-xx.js 贼大，查看js文件才发现是 里面有太多不属于该页面的代码了，查看了一下路由，静态路由的是按需加载，但是动态路由是使用require形式加载的

改动点1： 动态路由按需加载

但是有个问题就是： 如果配置的菜单有很多，打包的时候 一个菜单会被分成一个chunk文件这样打包的速度就是变的很慢。但是能很有效的解决 你打开的页面对应就是你那个页面的chunk文件的代码

if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }

第二次解决

虽然单个页面加载变快了，但是首页进去还是很慢呢，排查原因发现首页加载资源的时候这个 chunk-lib.js 依赖包的文件太大了5MB左右， 这就需要用到第二招

打包压缩文件

1. // 下载  "compression-webpack-plugin": "^5.0.2",
2. 在 vue.config.js 里面配置
configureWebpack: {
 plugins: [
            // 这个插件能看打包进度
            new progressBarPlugin({
                format: 'build[:bar]' + ':percent' + '(:elapsed seconds)',
                clear: false
            }),
            // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
            new CompressionPlugin({
                cache: false,                   // 不启用文件缓存
                test: /\.(js|css|html)?$/i,     // 压缩文件格式
                filename: '[path].gz[query]',   // 压缩后的文件名
                algorithm: 'gzip',              // 使用gzip压缩
                minRatio: 0.8                   // 压缩率小于1才会压缩
            })       
          ]
}

结果

每一个文件后面都会再加一个 .gz的 已经压缩后的文件

同时也需要让后台给nignx做一下对应的配置这个不做多余解释

验证 是否生效

第三次解决

压缩完文件其实首页的加载速度有了显著的提升，但是 如果压缩完的chunk-lib.js依旧很大怎么办！ 将依赖包单独进行分割处理

也有缺点： 还是不建议用，因为分的太细，初次加载可能就一次就有几十个请求，浏览器的并发限制是6个，所以几十个请求同时发出会造成堵塞，搞不好还会弄巧成拙，这里只是提供一种思路，具体还是看情况而定

configureWebpack: {


 optimization: {
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'async',
                minChunks: 2,
                maxAsyncRequests: 4, // 按需加载的最大并行数
                maxInitialRequests: 4, // 入口点的最大并行请求数
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                        enforce: true,
                        name(module) {
                            var packageName = null
                            if (module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)) {
                                packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                console.log('压缩', `npm.${packageName.replace('@', '')}`);
                                return packageName ? `npm.${packageName.replace('@', '')}` : ''
                            }
                         }
                     }
                  }
          
              }
         }

}