1.问题描述
在 webpack 中,默认会将所有的 js 打成一个 包。
假设在多页面工程中,那可能 index.html 只需要引入 index.js。
按照默认的做法,这样就加载了一些不必要的 js 代码,导致加载时间变长。
2.解决问题
我们可以使用 入口起点
,来配置多个打包入口,这样就会生成多个 js 文件。
每个 入口 都会生成一个 js 文件。
我们需要修改:
entry
:指定多个入口文件output
:由于是多个入口文件了,所以需要将名称写成动态的。htmlWebpackPlugin
:由 chunks 属性指定该 html 需要引入哪些包。
在 htmlWebpackPlugin 的 chunks 属性中,需要和 entry 对象中的 key 对应。
module.exports = {
entry: {
index: './src/js/index.js',
about: './src/js/about.js',
},
output: {
// 将名称改成动态的
filename: 'static/js/[name].js',
path: path.resolve(__dirname, '../dist'),
clean: true,
},
// 需要在 htmlWebpackPlugin 中配置该 html 引入了哪些包
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index.html',
inject: 'body',
// 代表引入 static/js/index.js 这个包
chunks: ['index'],
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: './src/pages/about.html',
inject: 'body',
// 代表引入 static/js/about.js 这个包
chunks: ['about'],
}),
]
};
3.弊端
假设在 index.js 和 about.js 文件中,都引入了 lodash 这个库。
// index.js | about.js
import _ from 'lodash';'
那么在进行打包时,这两个 js 文件都会将 lodash 的源代码引入进来,从而这两个 js 文件体积都提升。
所以我们需要将 lodash 提取成公共的模块。
4.提取公共模块
我们需要在 优化
配置项中添加该属性。
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
这样就会生成 3 个 js 文件,分别是 index.js、about.js、lodash.js。
其中 index.html 和 about.html 都使用两个 script 标签来引入对应的 js 和 lodash.js 文件。
评论 (0)