10天掌握webpack 4.0 优化篇 (5)抽离公共代码
我们在开发多个页面的项目的时候,有时候会在几个页面中引用某些公共的模块,这些公共模块多次被下载会造成资源浪费,如果把这些公共模块抽离出来只需下载一次之后便缓存起来了,这样就可以避免因重复下载而浪费资源
场景:
项目中 有 a.js b.js index.js other.js 文件
index.js 和 other.js 同样引用了 a.js b.js 并且都使用了第3方库 jquery
代码如下:
a.js
console.log('a' + '--------')
b.js
console.log('b' + '--------')
index.js
import './a' import './b' console.log('index.js') import $ from 'jquery' console.log($)
other.js
import './a' import './b' console.log('other.js') import $ from 'jquery' console.log($)
配置webpack.config.js文件
optimization: { //分割代码快 splitChunks: { // 缓存组 cacheGroups: { // 公共模块 common: { chunks: 'initial', minSize: 0, minChunks: 2 }, vendor: { priority: 1,//添加权重 test: /node_modules/,//把这个目录下符合下面几个条件的库抽离出来 chunks: 'initial',//刚开始就要抽离 minSize: 0,//大小大于0字节的时候需要抽离出来 minChunks: 2,//重复2次使用的时候需要抽离出来\ } } } },
const path = require('path') let webpack = require('webpack') let htmlWebpckPlugin = require('html-webpack-plugin') module.exports = { mode: 'production', optimization: { //分割代码快 splitChunks: { // 缓存组 cacheGroups: { // 公共模块 common: { chunks: 'initial', minSize: 0, minChunks: 2 }, vendor: { priority: 1,//添加权重 test: /node_modules/,//把这个目录下符合下面几个条件的库抽离出来 chunks: 'initial',//刚开始就要抽离 minSize: 0,//大小大于0字节的时候需要抽离出来 minChunks: 2,//重复2次使用的时候需要抽离出来\ } } } }, entry: { index: './src/index.js', other: './src/other.js', }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new htmlWebpckPlugin({ template: './public/index.html' }), new webpack.IgnorePlugin(/^\.\/locale/, /moment$/) ], module: { noParse: /jquery|lodash/, // 正则表达式 rules: [ { test: /\.js?$/, include: path.join(__dirname, 'src'), exclude: /node_modules/, use: { loader: 'babel-loader', options: { "presets": [ "@babel/preset-env", "@babel/preset-react", ] } } } ] }, }
抽离第3方库需要注意:
这里需要配置权重 priority,因为抽离的时候会执行第一个common配置,入口处看到jquery也被公用了就一起抽离了,不会再执行wendor的配置了,所以加了权重之后会先抽离第三方模块,然后再抽离公共common的,这样就实现了第三方和公用的都被抽离了。
打包:
在打包后的common~index~other.js 我们可以看出:
a.js 与 b.js 被抽离了
完整代码:
https://gitee.com/guangzhou110/ten-days_to_master_webpack4/tree/master/webpack-dev-3
越努力越幸运