共计 1184 个字符,预计需要花费 3 分钟才能阅读完成。
学习 webpack4 – 基础配置学习 webpack4 – HTML 处理学习 webpack4 – 样式处理学习 webpack4 – ES6 语法转化学习 webpack4 – 第三方模块的使用学习 webpack4 – 抽离公共代码
… 持续中
=======================================================
抽离公共代码
我们在开发多个页面的项目的时候,有时候会在几个页面中引用某些公共的模块,这些公共模块多次被下载会造成资源浪费,如果把这些公共模块抽离出来只需下载一次之后便缓存起来了,这样就可以避免因重复下载而浪费资源,那么怎么在 webpack 中抽离出公共部分呢?方法如下:
公共模块抽离
举例:
项目中分别有 a.js, b.js, page1.js, page2.js 这四个 JS 文件,page1.js 和 page2.js 中同时都引用了 a.js, b.js,这时候想把 a.js, b.js 抽离出来合并成一个公共的 js,然后在 page1, page2 中自动引入这个公共的 js,怎么配置呢?如下:
配置 webpack.config.js 文件:
module.exports = {
//…
// 优化项配置
optimization: {
// 分割代码块
splitChunks: {
cacheGroups: {
// 公用模块抽离
common: {
chunks: ‘initial’,
minSize: 0, // 大于 0 个字节
minChunks: 2 // 抽离公共代码时,这个代码块最小被引用的次数
}
}
}
}
}
完成!
第三方模块抽离
页面中有时会引入第三方模块,比如 import $ from ‘jquery’; page1 中需要引用,page2 中也需要引用,这时候就可以用 vendor 把 jquery 抽离出来,方法如下:
module.exports = {
//…
// 优化项配置
optimization: {
// 分割代码块
splitChunks: {
cacheGroups: {
// 公用模块抽离
common: {
chunks: ‘initial’,
minSize: 0, // 大于 0 个字节
minChunks: 2, // 在分割之前,这个代码块最小应该被引用的次数
},
// 第三方库抽离
vendor: {
priority: 1, // 权重
test: /node_modules/,
chunks: ‘initial’,
minSize: 0, // 大于 0 个字节
minChunks: 2, // 在分割之前,这个代码块最小应该被引用的次数
}
}
}
}
}
注意:这里需要配置权重 priority,因为抽离的时候会执行第一个 common 配置,入口处看到 jquery 也被公用了就一起抽离了,不会再执行 wendor 的配置了,所以加了权重之后会先抽离第三方模块,然后再抽离公共 common 的,这样就实现了第三方和公用的都被抽离了。
不加权重之前:jquery 也被抽离到了公共 js 里
加了权重之后: