3. 异步代码的处理
回到上面第一项，可以看到对于异步代码，默认就开启对异步代码进行分离。
因此，我们并不需要做什么特殊的处理，它会帮你分离好。
通过动态引入（import()）的代码就是典型的异步代码，它会在打包后生成一个 chunk：
// index.js function getComponent() { return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => { let element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; }); } // async function getComponent() { // const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash'); // let element = document.createElement('div'); // element.innerHTML = _.join(['Hello', 'webpack'], ' '); // return element; // } document.addEventListener('click', () => { getComponent().then(element => { document.body.appendChild(element); }); });
注意：/* webpackChunkName: "lodash" */ 是一个魔法注释，可以自定义分离文件（chunk）的名称，Chunk 就是被分离的代码。
这些动态引入的代码，在首次加载时并不会被引入。（此时，lodash.js 并没有被引入）
只有触发响应的事件（点击了页面，触发 getComponent 函数），这时才引入 lodash.js 。
由此可见，在一定程度上，动态引入的方式是优于同步引入的，这也就是为什么 webpack 默认对异步代码进行分离的原因。同时，使用异步代码，那么代码利用率也会得到提升。
4. 预获取 / 预加载模块
预获取 prefetch：在浏览器加载完必要的资源后，空闲时就会去获取可能需要的资源。
预加载 preload：预先加载当前页面可能需要的资源，它与必要资源并行请求。
import(/* webpackPrefetch: true */ './assets/js/click')
如图，它会在所有必要资源加载完成后，网络空闲就预先获取了添加了魔法注释的异步模块。
可以看到，标签也会有相应的变化。
5. CSS 的代码分离
CSS 也可以从主文件中分离出来，默认情况下打包后会被添加在 html 的 style 标签中。
如果 CSS 代码有很多行，那么直接嵌入在 html 文件中是不合适的，我们希望它是以 link 标签的形式去插入到 head 标签中，也就是外部引入 CSS 文件的形式。
首先安装插件：
npm install --save-dev mini-css-extract-plugin
注意：它要配合 css-loader 使用。
// webpack.config.js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, };
注意：除了引入和配置到插件处，还要记得把 'style-loader' 删除，添加为 MiniCssExtractPlugin.loader。
打包后：
style 标签不见了，变成了 link 标签引入 CSS。
小结
- 代码分离：将重复代码从打包的最终文件 main.js 中分离出来，避免重复加载，浪费性能。
- 默认情况下，只对异步代码进行分离，同步代码需要自己手动设置。
- import() 这种动态引入的语法只要使用了，Webpack 就会帮你分离。
- 有些不会干扰到全局的异步代码，可以预获取或预加载。
- CSS 的代码分离：mini-css-extract-plugin
