代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。
常用的代码分离方法有三种：
- 入口起点：使用 entry 配置手动地分离代码。
- 防止重复：使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk。
- 动态导入：通过模块的内联函数调用来分离代码。
入口起点
这是迄今为止最简单直观的分离代码的方式。不过，这种方式手动配置较多，并有一些隐患，我们将会解决这些问题。先来看看如何从 main bundle 中分离 another module(另一个模块)：
index.js文件：
import _ from 'lodash';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
another-module.js文件：
import _ from 'lodash';
console.log(_.join(['Another', 'module', 'loaded!'], ' '));
webpack.config.js文件，改变entry配置：
entry: {
index: './src/index.js',
another: './src/another-module.js',
},
打包后的bundle会出现重复代码，我们在 ./src/index.js 中也引入过 lodash，这样就在两个 bundle 中造成重复引用。
正如前面提到的，这种方式存在一些隐患：
- 如果入口 chunk 之间包含一些重复的模块，那些重复模块都会被引入到各个 bundle 中。
- 这种方法不够灵活，并且不能动态地将核心应用程序逻辑中的代码拆分出来。
防止重复(prevent duplication)
入口依赖
配置 dependOn option 选项，这样可以在多个 chunk 之间共享模块。
entry: {
index: './src/index.js',
another: './src/another-module.js',
index: {
import: './src/index.js',
dependOn: 'shared',
},
another: {
import: './src/another-module.js',
dependOn: 'shared',
},
shared: 'lodash',
},
如果我们要在一个 HTML 页面上使用多个入口时，还需设置 optimization.runtimeChunk: 'single'，否则还会遇到麻烦。
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
// tell the dev server where to look for files
devServer: {
contentBase: './dist',
},
entry: {
shared: 'lodash',
index: {
import: './src/index.js',
dependOn: 'shared',
},
another: {
import: './src/another-module.js',
dependOn: 'shared',
},
},
optimization: {
runtimeChunk: 'single',
},
output: {
// filename: 'main.js',
// filename: '[name].[contenthash].bundle.js',
// path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
path: __dirname + '/dist'
},
plugins: [
// new CleanWebpackPlugin(), // 构建前清理 /dist 文件夹
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebpackPlugin({ template: './src/index.html' })
// new HtmlWebpackPlugin({ title: '管理输出' })
]
};
运行npm run build除了生成 shared.bundle.js，index.bundle.js 和 another.bundle.js 之外，还生成了一个 runtime.bundle.js 文件。
虽然在webpack中允许每个页面有多个入口点，但在可能的情况下，应该避免使用多个入口点，最好使用一个入口多个引入 : entry: { page: ['./analytics', './app'] }，这样在引入异步脚本时，会有更好的优化和一致的执行顺序。
SplitChunksPlugin
SplitChunksPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。让我们使用这个插件，将之前的示例中重复的 lodash 模块去除。
optimization: {
splitChunks: {
chunks: 'all',
},
},
webpack.config.js：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
// tell the dev server where to look for files
devServer: {
contentBase: './dist',
},
entry: {
index: './src/index.js',
another: './src/another-module.js',
},
output: {
// filename: 'main.js',
// filename: '[name].[contenthash].bundle.js',
// path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
path: __dirname + '/dist'
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
// new CleanWebpackPlugin(), // 构建前清理 /dist 文件夹
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebpackPlugin({ template: './src/index.html' })
// new HtmlWebpackPlugin({ title: '管理输出' })
]
};
使用 optimization.splitChunks 配置选项之后，执行 npm run build 看到，index.bundle.js 和 another.bundle.js 中已经移除了重复的依赖模块。需要注意的是，插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小。效果：
以下是由社区提供，一些对于代码分离很有帮助的 plugin 和 loader：
- mini-css-extract-plugin: 用于将 CSS 从主应用程序中分离。
动态导入(dynamic import)
当涉及到动态代码拆分时，webpack 提供了两个类似的技术。第一种，也是推荐选择的是使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入。第二种，则是 webpack 的遗留功能，使用 webpack 特定的 require.ensure。先尝试使用第一种……
import() 调用会在内部用到 promises。如果在旧版本浏览器中（例如，IE 11）使用 import()，记得使用一个 polyfill 库（例如 es6-promise 或 promise-polyfill），来 shim Promise。
现在，我们不再使用 statically import(静态导入) lodash，而是通过 dynamic import(动态导入) 来分离出一个 chunk。
src/index.js：
function getComponent() {
return import('lodash')
.then(({ default: _ }) => {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
})
.catch((error) => 'An error occurred while loading the component');
}
getComponent().then((component) => {
document.body.appendChild(component);
});
运行npm run build后的结果：
之所以需要 default，是因为 webpack 4 在导入 CommonJS 模块时，将不再解析为 module.exports 的值，而是为 CommonJS 模块创建一个 artificial namespace 对象，更多有关背后原因的信息，请阅读 webpack 4: import() and CommonJs。
由于 import() 会返回一个 promise，因此它可以和 async 函数一起使用。下面是如何通过 async 函数简化代码：
index.js:
async function getComponent() {
const { default: _ } = await import('lodash');
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
getComponent().then((component) => {
document.body.appendChild(component);
});
可以通过向 import() 传入一个动态表达式，根据计算后的变量(computed variable)导入特定模块。
预获取/预加载模块(prefetch/preload module)
webpack v4.6.0+ 增加了对预获取和预加载的支持。
在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 “resource hint(资源提示)”，来告知浏览器：
- prefetch(预获取)：将来某些导航下可能需要的资源
- preload(预加载)：当前导航下可能需要资源
下面这个 prefetch 的简单示例中，有一个 HomePage 组件，其内部渲染一个 LoginButton 组件，然后在点击后按需加载 LoginModal 组件。
LoginButton.js:
//...
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');
这会生成 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部，告诉浏览器在闲置时间预取 login-modal-chunk.js 文件。
只要父 chunk 完成加载，webpack 就会添加 prefetch hint(预取提示)。
prefetch 和preload 指令有许多不同之处：
- preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
- preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
- preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。
- 浏览器支持程度不同。
举个简单的 preload 示例：有一个 Component，依赖于一个较大的 library，所以应该将其分离到一个独立的 chunk 中。
假想这里的图表组件 ChartComponent 组件需要依赖体积巨大的 ChartingLibrary 库。它会在渲染时显示一个 LoadingIndicator(加载进度条) 组件，然后立即按需导入 ChartingLibrary：
ChartComponent.js：
//...
import(/* webpackPreload: true */ 'ChartingLibrary');
在页面中使用 ChartComponent 时，在请求 ChartComponent.js 的同时，还会通过 请求 charting-library-chunk。假定 page-chunk 体积很小，很快就被加载好，页面此时就会显示 LoadingIndicator(加载进度条) ，等到 charting-library-chunk 请求完成，LoadingIndicator 组件才消失。启动仅需要很少的加载时间，因为只进行单次往返，而不是两次往返。尤其是在高延迟环境下。
使用 webpackPreload 不正确会有损性能，请谨慎使用。
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
