2024-07-15 记录一则vue网站优化的小技巧

vite+vue+某框架写的网站可以通过配置vite.config.js中的build.rollupOptions.output.manualChunks来手动分割指定的包到指定的文件夹内，然后在网站入口文件按照需求引入

比如：

    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            antd: ['@ant-design'],
            chart: ['echarts'],
            vue: ['vue', 'vue-router'],
          },
        },
      },
    },

通过这个配置可以把打出来的包的文件进行二次分类，比如把antd的文件或者图标echarts的文件分开成一个目录，然后在网站入口文件index.html里通过link按需引入。

这样可以优先加载指定的js文件，对于一些特定场景，比如要首次加载要优先加载某某js文件，这时候就派上用场了。

其实这个不局限于vue项目，只要你的项目是vite构建的，都可以这么玩。