webpack(高级)--性能优化-代码分离

最新推荐文章于 2023-05-20 10:45:00 发布

_聪明勇敢有力气

最新推荐文章于 2023-05-20 10:45:00 发布

阅读量768

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_65402230/article/details/129038754

版权

webpack 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

webpack

webpack性能优化

优化一：打包后的结果上线时的性能优化（比如分包处理减少包体积 CDN服务器）
优化二：优化打包速度开发或者构建优化打包速度（比如exclude cache-loader等）
大多数情况下我们侧重与优化一这对于线上的产品影响更大
在大多数情况下webpack都帮我们做好了该有的性能优化
比如配置mode为production或者development时默认webpack的配置信息
但是我们也可以针对性的进行自己的项目优化

代码分离

代码分离是webpack一个非常重要的特性
它主要的目的是将代码分离到不同的bundle中之后我们可以按需加载或者并行加载这些文件
比如默认情况下所有的javascript代码（业务代码第三方依赖暂时没有用到的模块）在首页全部都加载就会影响首页的加载速度
代码分离可以分出更小的bundle 以及控制资源加载优先级提供代码的加载性能

webpack中常用的代码分离有三种
入口起点：使用entry配置手动分离代码
防止重复：使用Entry Dependencies或者SplitChunksPlugin去重和分离代码
动态导入：通过模块的内联函数调用来分离代码

多入口起点

入口起点的含义非常简单就是配置多入口
比如配置一个index.js和main.js的入口
他们分别有自己的代码逻辑

当我们是单入口起点时
在webpack.config.js中
entry项是一个字符串
输出output的filename是确定的

entry:'./src/index.js',
output: {
		path: path.resolve(__dirname, "./build"),
		filename: "bundle.js",
		clean: true,
},

而如果是多入口起点
entry项是一个对象
输出output的filename需要占位符占位一般使用[name]打包后name变为entry的键名

entry:{
	index: './src/index.js',
	main: './src/main.js'
},
output: {
		path: path.resolve(__dirname, "./build"),
		filename: "[name]-bundle.js",
		clean: true,
},

当两个入口文件中都使用的同样的引用例如都使用了axios
这时打包就会打包两次
我们可以设置shared 表示是共享的

entry:{
	index: './src/index.js',
	main: './src/main.js',
	shared: ['axios']
},

那如果有很多入口并且共享的是不同的
我们就要把入口写成对象形式使用import设置入口文件路径
dependOn设置共享的引用

	entry: {
		index: {
			import: "./src/index.js",
			dependOn: "shared1",
		},
		main: {
			import: "./src/main.js",
			dependOn: "shared1",
		},
		shared1: ["axios"],
		shared2: ["dayjs", "redux"],
	},

动态导入

webpack提供了两种实现动态导入的方式
第一种使用ECMAScripot中的import()语法来完成也是目前推荐的方式
第二种使用webpack遗留的require.ensure 目前不推荐使用

比如我们有一个模块bar.js
该模块我们希望在代码运行过程中来加载它（比如判断一个条件成立时加载）
因为我们并不确定这个模块中的代码一定会用到所以最好拆分成一个独立的js文件
这样可以保证不用到该内容时浏览器不需要加载和处理该文件的js代码
这时我们就可以使用动态导入

单独针对分包的文件进行命名我们可以设置chunkFilename

	output: {
		path: path.resolve(__dirname, "./build"),
		filename: "bundle.js",
		chunkFilename: '[id]_[name]_chunk.js',
		clean: true,
	},

我们也可以使用魔法注释webpackChunkName 此时name就变为about

import(/* webpackChunkName: "about" */'./router/about')

SplitChunks

另外一种分包的模式是splitChunk 它底层是使用SplitChunksPlugin来实现的
因为该插件webpack已经默认安装和集成所以我们并不需要单独安装和直接使用该插件
只需要提供SplitChunksPlugin相关配置信息即可

Webpack提供了SplitChunksPlugin默认的配置我们也可以手动来修改它的配置
比如默认配置中 chunks仅仅针对于异步(async)请求我们也可以设置为all

	optimization: {
		splitChunks: {
			chunks: "all",
		},
	},

我们可以设置包的大小maxSize 如果大于这个值继续分包

	optimization: {
		splitChunks: {
			chunks: "all",
			maxSize: 20000
		},
	},

包不小于minSize

	optimization: {
		splitChunks: {
			chunks: "all",
			maxSize: 20000,
			minSize: 10000
		},
	},

自己对需要进行拆包的内容进行分包设置cacheGroups
test表示要进行拆包内容的路径

	optimization: {
		splitChunks: {
			chunks: "all",
			maxSize: 20000,
			minSize: 10000,

			cacheGroups:{
				vendors:{
					test:/[\\/]node_modules[\\/]/,
					filename: "[name]_vendors.js"
				},
				utils:{
					test:/[\\/]utils[\\/]/,
					filename: "[name]_utils.js"
				}
			}
		},
	},