webpack打包优化

开发环境优化

优化打包构建速度,优化调试功能

1.开启devServer中的hot开启为true 启动热模块更新(只适用用css,js\html不生效)

解决:entry中添加html文件的入口,后台管理只有一个html文件

2.解决js的HMR

// 入口文件手动添加监听

if(module.hot){
	module.hot.accept('./print.js',function(){
		// 监听到该文件变化的时候重新加载文件
		print();
	})
}

扩展:可循环添加方法

devServer开启devtool

配置选项为

	souce-map

	eval-souce-map

	eval-module-souce-map

	eval-souce-map

生产模式优化

优化代码性能

关闭souceMap

devServer开启devtool

配置选项为:nosources-source-map (全部隐藏) hidden-source-map(只隐藏源代码)

tree shaking

代码分割 按需加载

webpack.config.js

// 进行多入口配置
entry:{
	index:'./src/index.js',
	test:',./src/test.js'
},
output:{
	filename:'js/[name].js',
	path:resolve(__dirname,'build');
	// 打包到build文件夹下
}

optimization

webpack.config.js

// 将js中引入的js文件,单独打包成为一个chunk 
// 当a,b,c 公用一个js文件的时候使用该方法做一个抽离,将公共js抽出,而不是每一个都进行单独引入
optimization:{
	splitChunks:{
		chunks;'all',
	}
}

import动态导入

懒加载

(对于第一次执行的js代码,在使用的时候才加载)

预加载 tip:存在兼容性问题

(在第一次执行的时候就加载到缓存中,等其他主要资源加载完成之后再去加载)

正常加载

(并行加载,无论顺序5)

PWA

网页离线访问技术,渐进式开发应用程序

workbox --> workbox-webpack-plugin -D

webpack.config.js

多进程打包

只有工作消耗时间大于600ms的时候去使用,600ms是应为一个进程通信时间

cnpm i thread-loader -D

在js的loader中进行使用即可

{
	loader:'thread-loader',
	options:{
		workers:2
		// 同时打包2个进程
	}
}

CDN打包

1.webpack.config.js

externals:{
	// 不需要打包的依赖
	jquery:'JQuery'
}

2.在html入口文件中使用CDN链接引入该包

devServer