代码分离是 webpack 中最引人注目的特性之一。
此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。
代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。
常用的代码分离方法有三种:
- 入口起点:使用
entry
配置手动地分离代码。 - 防止重复:使用
Entry dependencies
或者SplitChunksPlugin
去重和分离 chunk。 - 动态导入:通过模块的内联函数调用来分离代码。
入口起点(entry point)
another-module.js
新建文件another-module.js:
import _ from 'lodash';
console.log(_.join(['Another', 'module', 'loaded!'], 'console.log'));
index.js:
import _ from 'lodash';
function component () {
const element = document.createElement('div');
const btn = document.createElement('button')
// lodash 在当前 script 中使用 import 引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Let click it!'
element.appendChild(btn)
return element;
}
document.body.appendChild(component());
此时项目结构:
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
|- another-module.js
|- /node_modules
修改webpack.config.js:
const path = require('path')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
another: './src/another-module.js',
},
output: {
filename: