「跟着然叔学webpack」配置代码分割

学习资料

• 2023前端面试题 - 工程化专题 - 10- Webpack配置CodeSplitting代码分割

知识

什么是代码分割？

• 其核心就是将代码拆分成小块，然后按需加载。
• 目的：使应用更快响应，只加载必要代码而不是所有代码，减少资源消耗。

如何进行代码分割？

方法一：多Entry入口法

module.exports={
  entry:{
    entry1:'./src/entry1.js',
    entry2:'./src/entry2.js',
    entry3:'./src/entry3.js',
  },
  output:{
    filename:'[name].js',
    path:__dirname+'/dist'
  }
}

• 将每个入口，打包成一个单独的bundle.js文件

方法二：动态按需加载法（即懒加载）

• 在路由部分，将import静态导入，改为import动态导入。