前端打包之我后端开发见

最近在做一个项目，前端打包后，一个vendor的js有40MB，通过GZIP压缩后也有接近10多MB，导致第一页打开等待时间很长，尤其是在针管式的宽带情况下。

作为一个后端开发，一直觉得目前前端框架build出来的bundle或者是chunk将多个资源合并在一起好处并不是那么大，而且每次修改一点点东西都不得不重新build一次项目。

经过一段时间的琢磨，发现其实将每个依赖分别打成一个chunk包就挺好的，因为他们本身就有非常清晰的依赖关系。各个JS就以自己本身的形式引入页面，而不用和谁合起来返回。如果人工的按照目录进行chunk拆分，可能会发生找不到某个变量之类的问题。

我觉得目前我用这个配置就挺好，将页面的加载速度才能够几十秒，缩短到2s左右，在此分享出来：

rollupOptions:{
        output:{
          manualChunks: id => {
            if (id.includes("node_modules")) {
              let idx = id.lastIndexOf("node_modules/") + "node_modules/".length;
              let chunkName = id.substring(idx, id.indexOf("/", idx));
              console.log("chunk " + chunkName + "   for " + id);
              return chunkName;
            } else{
              return null;
            }
          },
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split("/") : [];
            const fileName = facadeModuleId[facadeModuleId.length - 2] || "[name]";
            return `js/${fileName}/[name].[hash].js`;
          },
          minifyInternalExports: false
        }
      }