webpack使用import()来进行代码拆分

查看webpack的分析报告的时候发现mockjs也被打包打到vendor里, 但是其实线上是并不需要这个库, 所以希望将其打成一个单独的chunk, 只在开发环境引用, import()就有这个作用。

最开始的写法:

1	process.env.NODE_ENV === 'development' && require('@/mock')

使用import():

1 2	process.env.NODE_ENV === 'development' && import(/* webpackChunkName: "mock" */ '@/mock')

这样就会将mockjs另外再打一个chunk啦
但是由于import()是异步的, 所以会发现mockjs在第一次刷新页面的时候可能不会生效
所以再改进一下, 比如在Vue中利用IIFE等待它加载完成之后再实例化：

;(async () => {
  process.env.NODE_ENV === 'development' 
  && await import(/* webpackChunkName: "mock" */ '@/mock')
  new Vue({})
})()