vue打包chunk-vendors.js文件過大導致頁面加載緩慢的解決

更新時間：2022年04月22日 14:40:09 作者：卡爾特斯

這篇文章主要介紹了vue打包chunk-vendors.js文件過大導致頁面加載緩慢的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

打包chunk-vendors.js過大導致頁面加載緩慢

1.chunk-vendors.js 簡介

顧名思義，chunk-vendors.js 是捆綁所有不是自己的模塊，而是來自其他方的模塊的捆綁包，它們稱為第三方模塊或供應商模塊。

通常，它意味著（僅和）來自項目 /node_modules 目錄的所有模塊，會將所有 /node_modules 中的第三方包打包到 chunk-vendors.js 中。

將所有的第三方包集中到一個文件，自然也會出現文件過大的問題。

3.chunk-vendors.js 文件大小分析

新創(chuàng)建一個 vue 項目，通過打包之后運行到服務器，然后訪問得到 chunk-vendors.js 為 182 B

通過安裝第三方組件，將 chunk-vendors.js 文件增大，安裝第三方組件之后需要在 main.js 中導入，重新運行 npm run build 進行打包。

npm i --save ant-design-vue，安裝完打包后瞬間到了 1.9 MB！

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

npm i element-ui -S，安裝完打包后瞬間到了 2.6 MB！

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

不要看后面的 Time 時間那么短，因為這是內網本機訪問快，如果到了外網就跟服務器帶寬、性能有關了，但是文件這么大，加載慢，那就需要拆開來進行分塊加載，不是一味升級服務器解決問題，畢竟要錢的！

附帶還未進行分塊分包加載時，打包得到的文件目錄(js、css)

3.方式一

還有種是通過 webpack 前端配置，將第三方包分開打包，這樣不會將所有第三方包都打包到 chunk-vendors.js 文件，如果第三方包中存在過大的文件，那也會很大。

所以可以兩者一起使用也是可以的，選擇其中一種使用也可以，下面是兩種一起使用，可以根據情況剔除選一種，或者都使用。

const path = require('path');
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  devServer: {
    disableHostCheck: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面兩項配置才是 compression-webpack-plugin 壓縮配置
      // 壓縮成 .gz 文件
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
      }),
      // 壓縮成 .br 文件，如果 zlib 報錯無法解決，可以注釋這段使用代碼，一般本地沒問題，需要注意線上服務器會可能發(fā)生找不到 zlib 的情況。
      new CompressionPlugin({
        filename: '[path][base].br',
        algorithm: 'brotliCompress',
        test: /\.(js|css|html|svg)$/,
        compressionOptions: {
          params: {
            [zlib.constants.BROTLI_PARAM_QUALITY]: 11
          }
        },
        threshold: 10240,
        minRatio: 0.8
      })
    ],
    // 開啟分離 js
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 20000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name (module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      }
    }
  }
}

4.其他方式

比如將有些大的 js、css 通過 cdn 的方式鏈接，可以多種方案配合一起使用的。

其他參考方案

chunk-vendors過大導致首屏加載太慢的優(yōu)化

因app首頁加載不流暢，于是去檢查首頁加載項的耗時，最終發(fā)現是前端加載時js文件太大，導致首頁加載太慢，于是選擇了以下方案進行優(yōu)化。

1.安裝compression-webpack-plugin插件

前端將文件打包成.gz文件，然后通過nginx的配置，讓瀏覽器直接解析.gz文件，可以大大提升文件加載的速度。

npm使用下面命令安裝

npm install --save-dev compression-webpack-plugin

2.接下來要去修改vue的配置文件 vue.config.js

const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
? publicPath:'/appShare/',
? productionSourceMap: false,
? configureWebpack:{
? ? resolve:{
? ? ? alias:{
? ? ? ? '@':path.resolve(__dirname, './src'),
? ? ? ? '@i':path.resolve(__dirname, './src/assets'),
? ? ? }?
? ? },
? ? plugins: [
? ? ? // Ignore all locale files of moment.js
? ? ? new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
? ? ??
? ? ? // 配置compression-webpack-plugin壓縮
? ? ? new CompressionWebpackPlugin({
? ? ? ? algorithm: 'gzip',
? ? ? ? test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
? ? ? ? threshold: 10240,
? ? ? ? minRatio: 0.8
? ? ? }),
? ? ? new webpack.optimize.LimitChunkCountPlugin({
? ? ? ? maxChunks: 5,?
? ? ? ? minChunkSize: 100
? ? ? })
? ? ]
? },

3.nginx配置

server{
? ? listen 8087;
? ? server_name localhost;
? ? 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_disable "MSIE [1-6]\.";
? ? location /appShare {
? ? ? ?client_max_body_size ? ?10m;
? ? ? ?root /home/test/webIndex/appShare;
? ? ? ?try_files $uri $uri/ /appShare/index.html;
? ? ? ?index index.htm index.html;
? ? }
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: