webpack4学习笔记(四)

Tree Shaking

Tree Shaking可以剔除掉一个文件中未被引用掉部分(在producton环境下才会提出)，并且只支持ES Modules模块的引入方式，不支持CommonJS的引入方式。原因：ES Modules是静态引入的方式，CommonJS是动态的引入方式，Tree Shaking只支持静态引入方式。
在开发环境下需要在webpack中配置，但是在生成环境下，由于已有默认配置可以不配置optimization，但是sideEffects依然需要配置

optimization: {   // 开发环境时使用
        usedExports: true
    },

1
2
3

如果想要避免以下方式的引入使用Tree Shaking，可以在package.json中配置

import './index.css';
import '@babel/polyfill';
// package.json
  "sideEffects": ["*.css", "@babel/polyfill"],

1
2
3
4

Webpack 中的 sideEffects 到底该怎么用？

Develoment和Production模式的区分

在开发环境下我们会使用Develoment模式，在生成环境中我们使用Production模式。两个模式的区别：

在开发环境中，sourceMap是非常齐全的，可以帮快速地位问题，在Production环境下，sourceMap较简洁
在开发环境中，代码不会被压缩，在Production环境下，代码是被压缩过的

Code Spliting

webpack和Code spliting之间的关系,在我们使用第三方库时，避免第三方库和业务代码打包到一起，拆成多个文件后在html中分别引入，这样当页面业务逻辑发生变更时，只需要加载main.js就行，因为lodash.js已经在缓存中，不用重新加载，这样当话可以加快页面当加载速度,提升执行性能，优化项目。
配置

entry: {
        lodash: './src/lodash.js',
        main: './src/index.js'
    }, // 入口文件

1
2
3
4

lodash.js

import _ from 'lodash';
window._ = _;

1
2

SplitChunksPlugin

不管是同步代码的分割还是异步的代码分割都要使用SplitChunksPlugin这个插件，可以将第三方库从业务代码中分割出来。

optimization: {
        splitChunks: {
            chunks: 'all'， // 遇到公用当类库时，自动的Code Spliting
            cacheGroups: {
                vendors: false,
                default: false
            }
        }
    },

1
2
3
4
5
6
7
8
9

当splitChunks没有任何配置内容时，他会默认以下内容

splitChunks: {
    chunks: "async",  // 只对异步引入代码起作用，设置all时并同时配置vendors才对两者起作用
    minSize: 30000,   // 引入的库大于30kb时才会做代码分割
    minChunks: 1,   // 一个模块至少被用了1次才会被分割
    maxAsyncRequests: 5,   // 同时异步加载的模块数最多是5个，如果超过5个则不错代码分割
    maxInitialRequests: 3,   // 入口文件进行加载时，引入的库最多分割出3个js文件
    automaticNameDelimiter: '~',  // 生成文件名的文件链接符
    name: true,   // 开启自定义名称效果
    cacheGroups: {  // 判断分割出的代码放到那里去
        vendors: {   // 配合chunks： ‘all’使用，表示如果引入对库是在node-modules中，那就会把这个库分割出来并起名为vendors.js
            test: /[\\/]node_modules[\\/]/,
            priority: -10，// 优先级越高文件就放到哪里
            fileName: 'vendors.js'
        },
    default: {  // 为非node-modules库中分割出的代码设置默认存放名称
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true，// 避免被重复打包分割
            fileName: 'common.js'
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

如果想要为分割出的代码文件自定以名称的话，还需要安装

npm install --save-dev @babel/plugin-syntax-dynamic-import

// 自定义名称
import(/* webpackChunkName:"lodash" */ 'lodash')

1
2
3
4

← webpack4学习笔记(三) webpack4学习笔记(五) →

# webpack4学习笔记(四)

# Tree Shaking

# Develoment和Production模式的区分

# Code Spliting

# SplitChunksPlugin

webpack4学习笔记(四)

Tree Shaking

Develoment和Production模式的区分

Code Spliting

SplitChunksPlugin