webpack提取公共代码的作用:
减少代码冗余
提高加载速度
如下图:分别有A,B,C 3个模块,当加载图一时需要需要同时加载A和C模块,加载图二时,需要同时加载B,C模块
,而图3先将C提取出来,这样加载页面时,会减少重复加载和代码量
CommonsChunkPlugin相关介绍:
1.配置
{
plugins: [
new webpack.optimize.CommonsChunkPlugin(options)
]
}
options配置相关介绍(详细可参考中文档)
场景一,提取多入口文件的公共模块
1.demo目录结构
2.pageA.js内容
3.pageB.js内容
4.moduleA.js内容
5.subPageA.js
6.subPageB.js
7.webpack.config.js配置
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
// app: './src/app.js',
'pageA': './src/pageA',
'pageB': './src/pageB',
// 'vendor': ['lodash']
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
publicPath: './dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
// options: {
// presets: ['env']
// }
},
exclude: '/node_modules/',
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader/useable'
},
{
loader: 'css-loader'
}
]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2,
// children: true,
// async: true
// chunks: ['pageA', 'pageB']
}),
// new webpack.optimize.CommonsChunkPlugin({
// names: ['vendor', 'manifest'],
// minChunks: Infinity
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// minChunks: Infinity
// })
]
}
打包结果:
最终common.bundle.js会将入口pageA和pageB的公共模块moduleA,subPageB,subPageA提取出来
场景二,提取第三方依赖库
1.安装依赖lodash
npm i -D lodash
2.入口pageA,pageB全部引入第三方库lodash
import * as _ from 'lodash'
3.webpack.config.js配置
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
})
打包后,第三方依赖lodash和webpack打包文件会打入到vendor.bundle.js中
场景三: 提取第三方依赖库和公共模块以及webpack打包文件
webpack.config.js配置:
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2,
// children: true,
// async: true
chunks: ['pageA', 'pageB']
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'],
minChunks: Infinity
}),