此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。
有三种常用的代码分离方法：
- 入口起点：使用 entry 选项手动分离代码。
- 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
- 动态导入：通过模块的内联函数调用来分离代码。
entry
将js分割为多个，利用浏览器多线程，同时加载多个js文件，以此来提升效率，但同时此方法也将带来坑，会将重复的模块都打包。需要结合CommonsChunkPlugin来去重复。
image.png
app.js
import _ from 'lodash';
console.log('Hello app module');
main.js
import _ from 'lodash';
console.log('Hello main module');
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/main.js',
app: './src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
title: '代码分离'
}),
],
devServer: {
contentBase: './dist'
}
}
image.png
image.png
两个模块都将lodash打包了，导致重复代码，文件过大。
分离重复代码
在entry分离的步骤中，增加插件CommonsChunkPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/main.js',
app: './src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
title: '代码分离'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
],
devServer: {
contentBase: './dist'
}
}
image.png
动态导入
使用ES6语法import导入或者使用webpack提供的require.ensure.
image.png
app.js
let button = document.createElement('button');
button.innerHTML = '点我';
button.onclick = () => {
import(/* webpackChunkName: "lodash" */ 'lodash').then(function(_){
console.log(_.join(['Hello', 'webpack'], ' '));
}).catch(function(error){
console.error('error', error);
});
}
document.body.appendChild(button);
通过注释指明模块的名字 /* webpackChunkName: "lodash" */
webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Dy import'
})
]
}
当点击按钮后才请求lodash模块
image.png
