webpack4.15.1 学习笔记(六) — 代码拆分(Code Splitting)
目录
代码拆分能够将代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码拆分可以用于获取更小的 bundle，以及控制资源加载优先级，会影响加载时间。
常用的代码拆分方法：
- 入口起点：使用
entry配置手动地分离代码。 - 防止重复：使用
CommonsChunkPlugin去重和分离 chunk。 - 动态导入：通过模块的内联函数调用来分离代码。
入口起点
最简单、最直观的分离代码的方式。但手动配置较多，并有一些陷阱。
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
构建结果会生成 index.bundle.js 和 print.bundle.js ：
- 入口 chunks 之间包含的重复的模块，都会被引入到各个 bundle 中。
- 该方法不够灵活，且不能将核心应用程序逻辑进行动态拆分代码。
防止重复
SplitChunksPlugin插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk：
CommonsChunkPlugin在 webpack v4 中删除。RemovedPluginError: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
// ./src/index.js
import _ from 'lodash';
console.log(
_.join(['index', 'module', 'loaded!'], ' ')
);
// ./src/print.js
import _ from 'lodash';
console.log(
_.join(['print', 'module', 'loaded!'], ' ')
);
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all',
name:'common'
},
},
};
构建结果会生成 index.bundle.js 、 print.bundle.js 及common.bundle.js, 将 lodash 分离到单独的 chunk，并且将其从主包中移除，减轻了大小。
动态导入(dynamic imports)
使用符合 ECMAScript 提案的 import() 语法。import() 调用会在内部用到 promises。如果在旧版本浏览器中使用，需要使用 polyfill 库（如 es6-promise或 promise-polyfill）。
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
})
],
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js', // 决定非入口 chunk 的名称
path: path.resolve(__dirname, 'dist')
}
};
== ./src/index.js==：注释中使用了 webpackChunkName。这样做 bundle 被命名为 lodash.bundle.js
vendors 缓存组的配置可以检测第三方模块是否在 node_modules 中，如果存在则该 splitChunks 生效，将会分离到
vendors~...这样的文件中，因此此处我生成的文件名 为vendors~lodash.bundle.js
function getComponent() {
return import( /* webpackChunkName: "lodash" */ 'lodash').then( _ => {
var 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);
})