实现webpack 代码分割
时间: 2023-10-19 11:11:50 浏览: 57
Webpack 4+ 提供了一种名为 `SplitChunksPlugin` 的插件,可以很方便地将代码切割成多个 chunk,实现代码分割。
1. 安装 `webpack` 和 `webpack-cli`。
```
npm install webpack webpack-cli --save-dev
```
2. 在 `webpack.config.js` 中配置 `SplitChunksPlugin`。
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist') // 打包后的目录
},
optimization: {
splitChunks: {
chunks: 'all' // 将所有 chunk 都进行分割
}
}
};
```
3. 在代码中使用 `import()` 语法进行动态导入。
```javascript
import('./moduleA').then(moduleA => {
// 使用 moduleA
});
```
4. 执行打包命令,即可看到多个 chunk 被分割出来。
```
npx webpack
```
打包后的文件目录如下:
```
dist
├── 0.bundle.js
├── 1.bundle.js
├── 2.bundle.js
├── bundle.js
├── index.html
└── main.js
```
可以看到,原本的 `bundle.js` 被切割成了多个文件,以便更快地加载页面。