webpack.optimization.splitChunks:
用作代码分离和模块的去重提取
带着问题来探索,效率最高:
为什么要用splitChunks?
在看问题之前,先创建一个简单的项目结构
来方便下面的探索.
|--node_modules
|--build // 开发环境打包目录
|--src // 源码目录
|--app.html
|--views
|--shop.html
|--js
|--app.js
|--shop.js
|--webpack.config.js
|--package.json
webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/js/app.js'
},
output: {
path: path.join(__dirname, './build'),
filename: 'js/[name].[contenthash:10].js'
},
module:{
rules:[]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'app',
filename: 'app.html',
template: path.join(__dirname, './src/app.html')
})
],
mode: 'development',
}
-
问题1
在app.js中,引入
loadsh
库,此时运行webpack
命令进行打包,可以发现从app.js
打包出来的app.xxxxx.js
拥有552kb的大小,但实际上我再app.js里只有两行代码
// app.js
import _ from 'loadsh'
console.log('filename app.js')
默认打包
要解决这个问题,需要使用 splitChunks 插件来把loadsh提取成单独模块,只需要增加下面的简单配置:
// webpack.config.js
module.exports = {
...
optimization:{
splitChunks:{
chunks: 'all'
}
}
...
}
使用splitChunks默认配置打包
发现
app.xxxxx.js
变小,同时多出来一个vendors~app.xxx.js
,查看vendors~app.xxx.js
可以发现这是loash库的内容.
-
问题2
再添加一个
入口(entry)
配置,同样引入loadsh
库,然后再注释掉上面写的optimization
代码,运行webpack
命令打包.
根据截图发现app.xxxxx.js
和shop.xxxxx.js
都是551kb,查看这两个生成的文件就可以发现,loadsh
库被重复打包了
// webpack.config.js
module.exports = {
...
entry: {
app: './src/js/app.js',
shop: './src/js/shop.js'
},
// optimization:{
// splitChunks:{
// chunks: 'all'
// }
// }
...
}
// shop.js
import _ from 'loadsh'
console.log('filename shop.js')
默认打包
修改下webpack.config.js
文件,使用 optimization
配置
// webpack.config.js
module.exports = {
...
entry: {
app: './src/js/app.js',
shop: './src/js/shop.js'
},
optimization:{
splitChunks:{
chunks: 'all'
}
}
...
}
使用splitChunks默认配置打包
这次发现
app.xxxxx.js
和shop.xxxxx.js
变小,同时多出来一个vendors~app~shop.xxxxx.js
文件,这是loadsh
代码被提取成vendors~app~shop.xxxxx.js
,同时解决了:app.js
和shop.js
重复引用loash打包后也被重复打包进app.xxxxx.js
和shop.xxxxx.js
文件内
网友评论