☀️ [Webpack实战: 入门、进阶与调优] 7. 生产环境配置

JavaScriptWebpack

配置环境封装

生产环境和开发环境mode、文件名等配置会有不同。一般有两种方式对不同环境进行配置

1.使用环境变量区别

2.为不同环境创建配置文件

javascriptCopy

{
	// ...
	"script": {
		"dev": "webpack-dev-server --config=webpack.dev.config.js",
		"build": "webpack --config=webpack.dev.pro.js"
	}
}

javascriptCopy

module.exports = {
	// ...
	mode: 'production'
}

开启后webpack会自动添加生产环境相关的配置项，减少部分手动配置。

使用DefinePlugin 可以在运行时为生产和开发环境订阅不同变量

javascriptCopy

module.exports = {
	// ...
	plugins: [
		new webpack.DefinePlugin({
			ENV: JSON.stringify('production')
		})
	]
}

// any.js
console.log(ENV)

source map 用于将编译、打包、压缩后的代码映射回源代码。因为Webpack 打包后的代码基本不具备可读性，若代码抛出异常，想回溯调用栈非常困难。Source Map 是通过记录源代码和编译后代码之间的映射关系，使得开发者能够在调试时看到和操作原始源代码。

1.原理

2.source-map配置

3.安全

1.压缩javascript

2.压缩css

浏览器缓存会带来一个问题，如果每次打包生成的资源名一致，有时会命中缓存，导致资源更新不及时，通过给生成资源添加hash可以解决这个问题。

1.资源hash

2.动态输出HTML

Visual Studio Code的 Import Cost 插件，可以实时分析引入模块的大小

webpack-bundle-analyzer 可以分析bundle构成

javascriptCopy

const Analyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

module.exports = {
	// ...
	plugins: [
		new Analyzer()
	]
}

bundlesize npm包可以做资源体积监控

jsonCopy

{
	"bundlesize" : [
		{
			"path": "./bundle.js",
			"maxSize": "50 kb"
		}
	]
	"scripts": {
		"testSize": "bundlesize"
	}
}

2024/05/30 07:07