Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案

chunk-vendors.js 是/node_modules 目录下的所有模块打包成的包, 但是这包太大导致页面加载很慢(我的都要3-4秒了), 这个时候就会出现白屏的情况

解决方案

1、compression-webpack-plugin 插件解决方案

1)、安装

npm install compression-webpack-plugin -D

2)、在vue.config.js中使用 compression-webpack-plugin

javascript 复制代码
 const compressionWebpackPlugin = require('compression-webpack-plugin');

 chainWebpack: config => {
    if (!_IS_DEV__) {
      // 开启gzip压缩
      config.plugin('compressionPlugin').use(
        new compressionWebpackPlugin({
          algorithm: 'gzip',
          test: /\.js$|\.html$/,
          threshold: 10240,
          minRatio: 0.6,  // 必须为false, 不然部署之后会报错
          deleteOriginalAssets: false
        })
      );
    }
    // nginx server 里面配置
    // # 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度。
    // # compression-webpack-plugin 配置
    // gzip on;
    // gzip_min_length 1k;
    // gzip_comp_level 9;
    // gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    // gzip_vary on;
    // # 配置禁用 gzip 条件,支持正则,此处表示 ie6 及以下不启用 gzip(因为ie低版本不支持)
    // gzip_disable "MSIE [1-6]\.";
  },

3)、压缩对比

压缩之后1.5M变成466kb, 加载的时候就会加载这个466kb的文件

4)、配置nginx:在server中配置如下内容

javascript 复制代码
  # 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度。
  # compression-webpack-plugin 配置
  gzip on;
  gzip_min_length 1k;
  gzip_comp_level 9;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript applicationx-httpd-php image/jpeg image/gif image/png;
  gzip_vary on;
  # 配置禁用 gzip 条件,支持正则,此处表示 ie6 及以下不启用 gzip(因为ie低版本不支持)
  gzip_disable "MSIE [1-6]\.";

2、使用webpack optimization 进行对大文件分包打包

会把node_modules中的第三方文件独立打包,配置如下:

javascript 复制代码
optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 20000,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
        priority: -10, // 优先级值越大优先级越高,默认-10,不用修改
        name(module) {
          // 设定分包以后的文件模块名字,按照包名字替换拼接一下
            
          if (!module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)) return;
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        }
      }
    }
  }
}
相关推荐
m0_7482309413 分钟前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端·rust·excel
qq_5895681021 分钟前
Echarts的高级使用,动画,交互api
前端·javascript·echarts
黑客老陈1 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安1 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
编程百晓君2 小时前
一文解释清楚OpenHarmony面向全场景的分布式操作系统
vue.js
暴富的Tdy2 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se2 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235612 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ2 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel