网络知识 娱乐 webpack之常见性能优化

webpack之常见性能优化

webpack之常见性能优化

  • 构建性能
    • 减少模块解析
    • 优化loader性能
    • 限制loader的应用
    • 缓存loader的结果
    • 多线程打包
    • 开启热替换
    • 常见loader和plugin
  • 传输性能
    • 分包
      • 手动分包
      • 自动分包
    • 模块体积优化
    • 代码压缩
    • tree shaking
    • 懒加载
    • gzip
    • 辅助工具
  • 运行性能

关于webpack常见的性能优化,可从以下三方面做处理。

  1. 构建性能,当构建性能越高,开发效率越高。
  2. 传输性能,在这方面重点考虑网络中总的传输量,以及文件数量等。
  3. 运行性能,主要是指js在客户端的运行效率。

构建性能

减少模块解析

如果某个模块不做解析,该模块经过loader处理后的代码就是最终代码。

对于单独的模块不需要解析(不进行AST、不记录依赖、不进行依赖替换等操作,直接生成最终代码),可以做一下处理:

module.exports = {
	mode:'development',
	mdule:{
		noParse:/ElementUI/,
	}
}

对于存在依赖的模块,如果使用了noParse,存在的依赖并不会被记录和替换。

优化loader性能

限制loader的应用

针对某些第三方库,不必要使用某些loader处理。例如babel-loader,处理一些已经打包好的第三方库,反而增加了项目构建时间。

module.exports = {
	mode:'development',
	mdule:{
		rules:[
			{
				test:/.js$/,
				include:/.src/,//应用于src目录下
				exclude:/node_modules/, //排除某些文件或目录
				use:["xx-loader"]
			}
		],
	}
}

缓存loader的结果

当文件内容不变时,经过相同的loader解析后,解析结果并没有改变,所以这个时候将loader的解析结果保存下来,让后续的解析直接使用保存的结果,具体如下:

module.exports = {
	module:{
		rules:[
			{
				test:/.js$/,
				use:[{
					loader:'cache-loader'.
					cacheDirectory:'./cache'
				},...loaders]
			}
		]
	}
}

cache-loader的原理是,在执行loader之前,如果发现已缓存文件,直接在loader.pitch函数里return源代码。

多线程打包

通过thread-loader开启一个线程池,后续会把loader放进线程池的线程中运行以提高运行效率。

module.exports = {
	module:{
		rules:[
			{
				test:/.js$/,
				use:[{
					loader:'cache-loader'.
					cacheDirectory:'./cache'
				},
				'thread-loader']
			}
		]
	}
}

thread-loader可以通过测试决定放置的位置。

开启热替换

热替换(Hot Module Replacement)可以降低代码改动到效果呈现的时间,最新webpack默认开启热替换。

module.exports = {
	mode:'development',
	devServer:{
		open:true,
		hot:true
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./public/index.html'
		})
	]
}

默认情况下,webpack-dev-server不管是否开启热更新,当重新打包后,都会调用location.reload刷新页面,但如果运行module.hot.accept(),将改变这一行为。module.hot.accept的作用就是让webpack-dev-server通过socket管道,把服务器更新的内容发送到浏览器。

对于样式的热替换,可以添加style-loader

module.exports = {
	mode:'development',
	devServer:{
		open:true,
		hot:true
	},
	module:{
		rules:[{
			test:/.css$/,
			use:['style-loader','css-loader']
		}]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./public/index.html'
		})
	]
}

常见loader和plugin

loader名称loader描述
babel-loader转换ES6+新特性语法
style-loader将css文件引用并插到html
css-loader支持.css文件的加载和解析
less-loader支持less文件转换
sass-loader支持sass文件转换
ts-loader将ts转换成js
file-loader进行图片、字体等文件的打包
raw-loader将文件以字符串形式导入
thread-loader多进程打包
plugin名称plugin描述
CommonsChunkPlugin将chunks相同的模块代码提取成公共js
CleanWebpackPlugin清理构建目录
ExtractTextWebpackPlugin从捆绑包或捆绑包中提取文本到单独的文件中
CopyWebpackPlugin将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin创建html文件去承载输出的bundle
UglifyjsWebpackPlugin压缩代码
TerserPlugin压缩代码
ZipWebpackPlugin将打包的资源生产zip包
OptimizeCSSAssetsPlugincss压缩插件
WebpackBundleAnalyzer模块依赖的可视化

传输性能

分包

webpack默认不进行分包,会把所有依赖添加到同一个bundle,特别是在多页面打包的情况下,会存在多个chunk引入公共模块导致冗余代码的情况,占用打包体积。

分包的目的是在不影响源代码的情况下降低代码体积,并非所有的情况都适合分包,需要视具体情况而定。

手动分包

思路:

  1. 打包公共模块。例如常见第三方库。
  2. 手动引入公共js

注意事项:

  1. 不要对小型库进行单独打包。
  2. 不要对依赖多的库进行单独打包

公共模块打包过程如下:

//webpack.dll.config.js
const webpack = require('webpack')
module.exports = {
	mode:"production",
	entry:{
		element:['element'],
		jquery:['jquert']
	},
	output:{
		filename:'dll/[name].js',
		library:'[name]'//暴露全局变量名
	},
	plugin:[
		new webpack.DllPlugin({
			path:path.resolve(__dirname,'dll','[name].manifest.json'),//资源清单保存位置
			name:'[name]'//资源清单中保存的变量名
		}),
		
	]
}

//webpack.config.js
const webpack = require('webpack')
module.exports = {
	plugin:[
		new webpack.DllReferencePlugin({
			manifest:require('./dll/element.manifest.json')
		}) //指定资源清单,在打包时对照资源清单,当发现该模块是资源清单里的资源时不进行打包处理。
	]
}

引用: https://webpack.docschina.org/plugins/dll-plugin#dllplugin

自动分包

webpack提供了optimization配置项,其中splitChunks是分包策略的配置,通过splitChunksPlugin配置分包策略进行分包,分包时,webpack开启了一个新的chunk,对分离的模块进行打包。

一般开发阶段没必要分包,因为有热替换,并且开发一般是在本机,大文件对开发阶段影响不大。

分包的基础单位是模块。所以在设置minSize时有时会出现打包的文件超过该值。

全局策略:

module.exports = {
	entry:{},
	output:{},
	optimization:{
		splitChunks:{
			chunks:'all', //默认为async,可选all或者initial
			maxSize:30 *1024,//控制包的最大字节数
			automaticNameDelimiter:'.',//新chunk名称的分隔符,默认为~
			minChunks:1,//一个模块被多少个chunk使用时才会进行分包,默认为1
			minSize:30 * 1024,//单位为字节,当分包达到多少字节后才允许被真正地拆包,默认为30000
		},
	},
	plugin:[
	]
}

缓存组策略:
当不配置cacheGroups时,内部会存在vendors和default默认配置,我们也可以通过手动更改默认值。

module.exports = {
	entry:{},
	output:{},
	optimization:{
		splitChunks:{
			cacheGroups:{
				//默认存在以下配置,可继承全局配置
				vendors:{
					test:/[\/]node_modules[\/]/,//当匹配到相应模块时,将这些模块进行单独打包
					priority:-10//缓存组优先级,优先级越高,该策略越先进行处理,默认值为0
				},
				default:{
					minChunks:2,//最小chunk引用数为2
					priority:-20,//优先级
					reuseExistingChunk:true,//重用已经分离的chunk
				},
				elementUI:{
					minSize:0,
					test: /[\/]node_modules[\/]_?element-ui(.*)/,
					minChunks:2
					}
			}
		},
	}
}

模块体积优化

代码压缩

webpack内置terser,terser是一个代码压缩工具,压缩代码除了压缩代码体积,还可以提升破解成本。

Terser官网:https://terser.org/

默认情况下webpack的production模式是开启代码压缩,当我们要更改压缩配置时,可做以下处理:

module.exports = {
	optimization:{
		minimize:true, //是否启动压缩,默认是只在生产环境自动开启。
		minimizer:[
			//压缩时使用的插件,当你自动改压缩配置时必须配置相关压缩插件
			new TerserPlugin(),//js压缩插件
			new OptimizeCSSAssetsPlugin()//css压缩插件
		]
	}
}

terser、webpack、rollup.js都能够识别/*#__PURE__/注释标记,/*#__PURE__/的作用就是告诉打包工具该函数的调用不会产生副作用。

tree shaking

tree shaking,树摇,可以理解为摇动一棵树,即将腐烂的果实也随之摇动而掉落。

能够tree shaking的代码需要满足一定的代码规范,例如以下情况:

//有利于tree shaking
export xxx 导出,
import {xxx} from 'xxx'导入

//不利于tree shaking
export default {xxx}导出,
import xxx from ‘xxx'导入

上面的情况当webpack依赖分析完毕后,webpack会根据每个模块每个导出是否被使用,标记其为dead code,然后交给代码压缩工具处理。

commonjs很难做到tree shaking,所以主流的库为了做tree shaking,都会发布其es6版本。

以vue为例,vue的代码中大量使用/*#__PURE__*/注释,通常产生副作用的代码都是模块内函数的顶级调用。该注释可以作用于任何语句上,让打包工具识别。

tree shaking对于无法识别副作用的函数会认为是副作用函数,不会产生副作用的代码标记/*#__PURE__*/注释。

相比于js,css并无法做到tree shaking,不过可以通过正则匹配页面样式有没有引用进行移除样式代码。

可以通过purgecss-webpack-plugin进行处理,css module无法处理。

https://www.npmjs.com/package/purgecss-webpack-plugin

懒加载

通过动态导入模块,例如在判断里使用导入语句。
导入语句不能使用commonjs,虽然require支持动态导入,但是它在打包环节也会进入依赖分析。
动态加载可以使用import(),import作为es6的草案,webpack打包发现使用import()的调用,会对其单独打包,打包结果该代码时,浏览器会使用jsonp远程请求该模块,import()返回的是一个promise。

async function run(){
	if(判断条件){
		const { chunk } = await import(/* webpackChunkName:'自定义chunkName' */'xxx.js')
	}
}
run()

请求的异步的模块会加入webpackJsonp数组里。

值得注意的是,这样的异步导入是不可以做到tree shaking的,不过可以使用取巧的方法,通过一个媒介引入,打包分析过程既能tree shaking又能异步加载。

//媒介文件
export { xxx } from '目标文件'

//主文件
async function run(){
	if(判断条件){
		const { chunk } = await import(	'媒介文件')
	}
}
run()

gzip

http传输中,开启gzip需要进行如下配置:

  1. request header:Accept-Encoding:gzip,deflate,br
  2. response header:Content-Encoding:gzip

对哪些文件压缩,采用哪种压缩算法,这个需要测试权衡,毕竟压缩文件和解压文件都是需要时间的,对于相对大点的文件一般会有收益。

webpack压缩参与的步骤在于将文件预压缩,当请求到来时直接响应已经压缩的文件,而不需要先压缩再响应。

gzip预压缩可以通过compression-webpack-plugin插件进行。

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.export = {
	plugin:[
		new CompressionWebpackPlugin({
			test:/.js$/ //针对需要预压缩的文件
			minRatio:0.5 //压缩比率
		})
	]
}

以gzip为例,打包之后的文件包含了.js和.js.gz文件

辅助工具

  1. ESLint:通过ESLint规范代码。
  2. webpack-bundle-analyzer:通过该插件可以生成可视化打包结果的页面,有助于我们分析模块依赖。

运行性能

运行性能这方面,主要指js在浏览器端运行速度,取决于我们如何书写高性能的代码。

关于高性能的代码,可以参考常见的设计模式、代码规范、最佳实践等。