按需加载

按需要加载。例如两个页面，A没有必要加载B所用的资源，只需要加载A所必要的资源即可。

在需要导入的地方使用import进行导入。

const render = () => {
  const hash = window.location.hash || '#posts'

  const mainElement = document.querySelector('.main')

  mainElement.innerHTML = ''

  if(hash === '#posts'){
    // mainElement.apppendChild(posts())
    import('./posts/posts').then(({default: posts})=>{
      mainElement.appendChild(posts())
    })
  } else if (hash === '#index2'){
    // mainElement.apppendChild(posts())
    import('./picture/picture').then(({default: picture})=>{
      mainElement.appendChild(picture())
    })
  }
}

render();

window.addEventListener('hashchange', render);

chunck name

相同chunck name会合并到一起。

// 下面注释里的就会成为chunkname
import(/* webpackChunkName: 'picture' */  './picture/picture').then(({default: picture})=>{
  mainElement.appendChild(picture())
})

在输出目录中就会看到picture开头的文件