代码分离，就是将代码分离到不同的bundle（打包分离出来的文件）中，将这些文件按需加载或者并行加载，代码分离可以获取到更小的bundle，以及控制资源加载的优先级。

可以把多个模块共享的代码抽离出去，减少入口文件的大小，提高首屏的加载速度。

1.入口起点，使用entry配置手动的分离代码。配置多个入口文件，但是多个入口文件可能会存在重复的模块，这些重复的模块就会被引入到各自的bundle中，被重复打包。

2.使用Entry dependencies 和 SplitChunksPlugin 去重和分离代码。(防止重复)
Entry dependencies 

  1. entry: {
  2.   import: './src/index.js',
  3.     dependOn: 'shared' // 可以将一些共享（重复）的模块定义出来
  4. },
  5.   another:{
  6.     import: './src/another-module.js',
  7.       dependOn: 'shared'
  8.   },
  9.     // 如果两个模块中有lodash这个模块，就会被抽离出来，取名为shared的chunk
  10.     shared:'lodash'
  11. },

SplitChunksPlugin

  1. entry: {
  2.         index:'./src/index.js',
  3.         another:'./src/another-module.js'
  4. }    
  5. optimization: {
  6.         // 代码分割，将公用代码抽离到单独的文件夹
  7.         splitChunks: {
  8.             chunks: "all"
  9.         }
  10. }

3.通过模块的内联函数调用来分离代码。（动态导入）

  1. function getComponent(){
  2.     return import('lodash')
  3.         .then(({default: _})=>{
  4.             const element = document.createElement('div')
  5.             element.innerHTML = _.join(['async' , 'import'],' ')
  6.             return element
  7.         })
  8. }
  9. getComponent().then((res)=>{
  10.     document.body.appendChild(res)
  11. })

动态导入配合懒加载
懒加载或按需加载，将代码在一些逻辑断点处分离，然后在一些代码块中完成某些操作后，立即引用一些新的代码块。这样加快了页面初始加载的速度，减轻初始加载的总体体积，某些代码块可能永远不会被加载。

  1. export const add = (x,y) =>{
  2.     return x+y
  3. }
  5. export const minus = (x,y) => {
  6.     return x-y
  7. }
  1. const button = document.createElement('button')
  2. button.textContent = '点击执行加法运算'
  3. button.addEventListener('click',()=>{
  4.     import(/* webpackChunkName: 'math' */'./math.js').then(({add})=>{
  5.         console.log(add(2, 3));
  6.     })
  7. })
  8. document.body.appendChild(button)

预获取 webpackPrefetch:true
会在页面加载完毕之后，等网络有空余时，再去加载其他包

预加载webpackPreload:true