Webpack 4 动态切割React/Vue JS注入文件名

首先了解下代码分割的好处：

代码分割能够帮助你延迟加载用户当前需要的内容，同时也能显著地提升用户体验。尽管你没有减少app的总代码量，但你已经避免加载一些用户也许永远也用不到的代码了。而且还能够在初始加载时减少加载的代码数量。

再看下React和Vue是如何在基于webpack做代码分割的呢？

webpack 切割的时候如何加个可以跟随文件名变化的前缀。

大体就是就是 [request] 可以拿到实际解析的文件名，来取代默认的索引递增的方式。

对应的API官方文档：【[magic-comments](https://webpack.js.org/api/module-methods/#magic-comments)】

##### Vue实现

// 注册
const IntroRegister = register => {
  return () => import(/* webpackChunkName:"[request]" */ `@/views/intro-register/intro-register.vue`);
};

React实现

React代码分割要基于一个第三方插件实现，在这里我们基于 react-loadable, react-loadable的强制使用请见官方文档。

const GenerateTags = Loadable({
  loader: () =>
    import(/* webpackChunkName: "[request]" */ "./GenerateTags"),
    loading: LoadingSpinner
})

这样做的好处就是文件切割目的达到了,加载的资源文件也清晰，有名字一目了然，而非默认的 0.js,1.js