无论是用webpack 还是vite 这些打包效果都是一样的

这里使用的打包工具是vite

为了查看其中第三方库的打包的大小 这里做了一些配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ['echarts'],
          lodash: ['lodash'],
          lodashes: ['lodash-es'],
          vue: ['vue'],
          // 使用 Cherry-pick的时候再打开下方两行配置
          // throttle: ['lodash/throttle'],
          // cloneDeep: ['lodash/cloneDeep'],
        },
      },
    },
  },
})

一、清除没有页面中引用了但是没有使用的组件

例如上图 我们引用了一个使用了ecahrts的组件但是没有使用它，但是在打包的时候仍然将echarts打包了！！ 我们将其删除再打包看看

这样它就不会打包ecahrts的代码啦

二、使用lodash-es 去替代 lodash (如果您仍然在使用ie9之前的ie浏览器，请跳过此条)

什么是lodash-es?

lodash-es 是lodash的 es modules版本。在早期，lodash为了兼容大部分浏览器而采用了commonjs的方式进行打包 随着时代的更替 现在大部分浏览器都已经支持es modules的方式进行导入导出。

在打包时 lodash-es 比 lodash 更有优势

lodash

我们可以看到 我就导入lodash之后打包文件多了70多kb 原因是lodash是不支持esmodules的方式导出的， 我们这样的导入相当于将lodash整个导入进来了

(按道理来讲 打包工具应该会做treeShaking 将没用的代码给去除掉的 后续搞明白了再更新)

你可能会想 会不会就是 cloneDeep这个函数就这么大呢？ 其实不是的，我们换个方式继续导入来看看

可以看到 我们打包的lodash 仍然是70多kb!!! 那么有没用办法解决这种情况呢？ 答案是有的，我们再换个方式来看看(Cherry-pick 方式)

可以看到 我们导入了两个函数占了差不多15Kb!! 但是这种也有一个问题 + 如果多个地方使用lodash 我们这样引用则会非常麻烦

lodash-es

首先我们看下 完整引入lodash-es的文件大小

我们可以看到完整引用的代码体积是 85Kb 接下来我们按需引用

我们可以看到 按需引用之后文件大小为 14.8KB和上方使用Cherry-pick 方式的一致！(因为lodash-es是按照esmodules的方式打包的 所以可以直接用es的方式按需加载) 这样就会方便很多！