VUE 项目性能优化之给dist文件夹中chunk-vendor

问题描述

• 因为最近在开发过程中发现项目打包的的大小越来越大，所以想看一下具体占用打包体积的文件是什么，所以便找了自己mock的项目中通过webpack-bundle-analyzer打包进行查看。便发现了另外一个问题：chunk-vendors.js的大小很大，这样在js加载时会一次性加载完成，从而增加了首屏加载的时间。
  直接打包时chunk-vendors.js的大小
  dist中js的大小

所以，从我们的dome项目中都能发现chunk-vendors.js文件太大了，所以我们需要将其优化一下，拆分一下

1. 首先chunk-vendors.js是什么？

chunk-vendors.js，顾名思义chunk(块/包)-vendors(供应商)，即为：不是自己写的模块包，也就是/node_modules项目目录的所有模块包。所以这个chunk-vendors.js文件大的原因其实就是，我们把第三方的包都打包在这一个文件上了，都糅在一块，肯定大啊，所以想办法把其做一个拆分。

2.使用optimization.splitChunks做分包

• 我们先看一下分包拆分以后打包的dist文件夹中的js文件大小

  
  拆分之后每个插件的包都分开打了
  分包以后的效果图
• 这样的话，我们就把chunk-vendors.js文件由，原来的3097kB拆分成一个个几十KB的包文件了，这样的话，生产环境加载的时候，就会快一些.

splitChunks分包代码

我们以vue为例，在vue.config.js文件中加入以下代码。代码大家直接复制粘贴即可使用，也是笔者自己在生产环境中使用的哦,我也是复制粘贴的。

  configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return
        return {
            plugins: [
               // ......
            ],
            // 看这里：把chunk-vendors.js进行分包，提升资源加载速度，很有必要
            optimization: {
                /**
                 * runtimeChunk可选值有：true或'multiple'或'single'
                 * true或'multiple'会有每个入口对应的chunk。不过一般情况下
                 * 考虑到要模块初始化，设置为single就够多数情况下使用啦。
                 * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
                 * */
                runtimeChunk: 'single',
                /**
                 * 以前是CommonsChunkPlugin，现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
                 * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
                 * */
                splitChunks: {
                    chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
                    maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
                    minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
                    maxSize: 60000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
                    cacheGroups: {
                        vendors: {
                            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
                            priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
                            name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                return `npm.${packageName.replace('@', '')}`
                            },
                        },
                    },
                }
            }
        }
    },

总结 ：

• 经验时一点点增加的，经验时一点点积累的。

参考地址：

项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包，从而减少首屏加载时间
webpack-bundle-analyzer 打包项目管理工具