**目标：用户当前需要什么功能，就加载这个功能对应的代码 解决的问题：项目复杂时，单页面应用的许多功能都集中到一个html中，导致网页加载缓慢**。 webpack 内置了代码分割功能，可实现按需加载。 举个🌰： * 网页首次加载时，只加载 build.js 文件，在 build.js 文件里，包括监听 button 按钮的点击事件和按需加载的代码。 * 按钮被点击时，加载 show.js 文件。 ## 如何实现按需加载 1. import(/* webpackChunkName: "show" */ './show') ``` index.js的代码： document.getElementById('btn').addEventListener('click', function(){ import(/* webpackChunkName: "show" */ './show').then(show => { show.default('webpack') }) }) show.js 的代码： module.exports = function(content) { alert('hello'\+ content); } ``` 2. /* webpackChunkName: "show" */ 是为动态生成的 chunk 指定一个名字, 同时还需要在 webpack.config.js 配置。 ``` output: { filename: 'build.js', path: resolve(__dirname, 'build'), // 通常写一个绝对路径 chunkFilename: '[name].js' // 为动态加载的 chunk 配置文件名称 }, ``` 如果不加 chunkFilename: '[name].js' 的配置，chunk的文件名称将会是 [id].js ## webpack 遇到 import(*) 的语句时的处理过程 1. 以 ./show.js 为入口，重新生成一个chunk 2. 当代码执行到 import 的时候，加载第一步生成的文件。 3. import 返回一个Promise， 可以在 then 函数中获取到 show.js 导出的内容 由于 import 返回 Promise，所以在一些不支持 Promise 的浏览器中，需要 Promise polyfill的支持。