一、Tree Shaking
二、 development 和 production 模式的区分打包
三、 webpack和code splitting
四、splitChunksPlugin配置参数
——————————————
一、Tree Shaking
作用:当引入只想引入某一js文件中 一部分的模块而不是所有模块的时候, 又不想让所有模块都加载,就要使用tree shaking
Tree shaking只支持ES Module这种静态引入的方式
即 Import ... from '..'
不支持 const add =require(...) 这种commonJS 动态引入(ES Module底层是静态引入的方式,而Common JS的底层是动态引入)

使用 (在开发环境中)

然后在package.json中设置sideEffects
sideEffects 是针对一些没有导出的文件,如css文件,babel-polyfill 这样的文件, tree shaking 看到没有导出所以会自动忽略掉这些文件, 如果不希望被忽略掉就要,在sideEffects 中进行一些配置

通常也要对css不使用tree shaking

如果都需要做tree shaking 就写成false即可

如果是production 要这样写,下面的optimization不用写也行

如果是development 要这样写, 并且要写optimization

二、 development 和 production 模式的区分打包
对于生产模式和开发模式相应的配置也是不同的,比如开发时不需要代码的压缩,需要相对全的SourceMap,而生产模式会对代码进行压缩,不需要SourceMap

在根目录下建立webpack.dev.js 和webpack.prod.js
然后将两个文件中公共部门提取出来,命名为webpack.common.js
再用merge进行合并

通常会将webpack配置统一放在build目录下, 这时也需要将package.json文件进行修改 加上./build目录

三、 webpack和code splitting
code splitting : 代码分割
作用: 用户体验更好一些
背景介绍
比如现在我要引入一个第三方库"loadash" ,比如他有1mb大小, 然后自己写的业务逻辑代码也有1mb 大小, 此时加载后会有2mb大小的文件, 但是 事实上我们不会对loadash文件进行修改, 而每次访问都会重新加载, 会减慢网页速度。 因此需要进行一个拆分。
拆分前:

拆分后:
新建一个Lodash文件

在Index.js文件只写业务逻辑 即可

然后配置webpack 打包入口

最后生成的dist目录里有main.js和 lodash.js两个文件,并在会在index.html中引入两个文件

两种方式区别:

代码分隔,本质上与webpack无关,但是现在为什么说到代码分割就会想到webpack呢, 是因为在webpack与代码分割进行了捆绑, 比如在webpack4里面有一个插件叫"split-chunk-plugin"
在webpack里实现代码分割的简单配置项

webpack中实现代码分割有两种形式
- 同步代码的分割:只需在webpack.common.js中做optimization的配置
- 异步代码的分割(import):无需做任何配置,会自动进行代码分割。但是有时会有一些特定的需求,这个时候还是要写 optimization这个配置项进行一些特殊的配置
四、splitChunksPlugin配置参数
webpack实现代码分割底层用的是splitChunksPlugin。他里面有很多配置项,如果你什么都不配置他也会有自带的默认的配置项
异步的代码分割, 最终build后会在dist目录生成0.js,1.js 2.js文件, 这是做代码分割产生的id值, 可以自定义进行修改。 (具体怎么修改在4-5视频中)
看一下splitchunks所有的参数

chunks: async意思是只对异步的代码生效。 initial是对同步的代码进行分割。all 是既异步又同步
一个异步引入组件的栗子


这是同步的引入

cacheGroup
chunks和cachegroup是配合着使用的,对于同步的代码会走继续走cacheGroup

mixSize 如果要分割的代码的大小大于这个值才会做代码分割。
minChunks :当一个模块至少用了多少次的时候才对他进行代码分割
maxAsyncRequest 同时加载的模块数最多是多少个
maxInitialRquest: 首页/入口文件最多可以进行3个代码分割
缓存组的相关配置项

网友评论