webpack-2

时间 2020-07-05

标签 webpack 繁體版

原文原文链接

构建配置抽离成npm包的意义

通用性

业务开发和无需关注构建配置
统一团队构建脚本

可维护性

构建配置合理的拆分
README文档、changeLog文档等

质量

冒烟测试、单元测试、测试覆盖率
持续集成

构建配置管理的可选方案

经过多个配置文件管理不一样的环境，webpack --config参数进行控制
将构建配置设计成一个库，好比 hjs-webpack、Neutrino、webpack-blocks
抽成一个工具进行管理，好比 create-react-app,kyt,nwb
将全部的配置放在一个文件，经过 --env参数控制分支选择

构建配置包设计

经过多个配置文件管理不一样环境的webpack配置。

基础配置 webpack.base.config.js
开发环境 webpack.dev.config.js
生产环境 webpack.prod.config.js
SSR环境 webpack.ssr.config.js

经过 webpack-merge组合配置css

抽离成一个npm包统一管理

规范： git commit 日志、README、 ESlint规范、 Semver规范
质量：冒烟测试、单元测试、测试覆盖率和 CLI

冒烟测试

冒烟测试是指对提交测试的软件在进行详细深刻的测试以前而进行的预测试，这种预测试的主要目的是暴露致使软件需从新发布的基本功能失效等严重问题。html

执行

构建是否成功
每次构建完成build目录是否有内容输出

是否有JS、CSS等静态资源文件
是否有HTML文件

git提交

提交格式要求

<type>(<scope>):<subject>
<blank line>
<body>
<blank line>
<footer>

type表明每次提交的类型。全部type类型以下：node

feat: 新增feature
fix :修复bug
docs:仅仅修改了文档，好比README,CHANGELOG,CONTRIBUTE等等
style: 仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
refactor: 代码重构，没有加新功能或者修复bug
perf: 优化相关，好比提高性能、体验
test: 测试用例，包括单元测试、集成测试等
chore: 改变构建流程或者增长依赖库工具等
revert: 回滚到上一个版本

版本规范

遵照semver规范的优点react
- 避免出现循环依赖
- 依赖冲突减小
语义化版本规范格式webpack
1. 主版本号：作了不兼容的api修改
2. 次版本号：作了向下兼容的功能性新增
3. 修订号：作了向下兼容的问题修正
先行版本号
先行版本号能够做为发布正式版以前的版本，格式是在修订版本号后面加上一个链接号（-）,再加上一连串以（.）分割的标识符，
标识符能够由英文、数字和链接号[0-9A-Za-z-]组成。git
- alpha: 是内部测试版，通常不向外部发布，会有不少bug。通常只有测试人员使用。
- beta : 也是测试版，这个阶段的版本会一直加入新的功能。在alpha版以后推出。
- rc : Release Candidate系统平台上就是发行候选版本。RC版不会再加入新的功能了，主要着重于除错。

webpack构建速度和体积优化策略

stats

初级分析: 使用webpack内置的 stats:构建的统计信息web

package.json中使用stats。正则表达式

"scripts":{
 "build:stats":"webpack  --env production  --json > stats.json",
    ...
}

nodejs中使用算法

const webpack = require("webpack");
const congfig = require("./webpack.config.js")("production");

webpack(config,(err,stats)=> {
    if(err){
   	 return console.error(err)
    }
    if(stats.hasErrors()){
   	 return console.error(stats.toString("errors-only"));
    }
    console.log(stats);
})

缺点：颗粒度太粗，看不出问题所在。

`speed-measure-webpack-plugin`:速度分析

代码示例：

const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasureWebpackPlugin();
const webpackConfig = smp.wrap({
    plugins:[
   	 new MyPlugin(),
   	 new MyOtherPlugin()
    ]
})
//能够看到每一个loader和插件执行耗时

`webpack-bundle-analyzer`：分析体积

代码示例：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
	plugins:[
		new BundleAnalyzerPlugin()
	]
}
//构建完成后会在8888端口展现大小

能够分析哪些问题？

依赖的第三方模块的大小
业务里面组件代码的大小

使用高版本的webpack和nodejs。

高版本的webpack和nodejs，构建时间下降了 60%- 98%。
使用webpack4：优化缘由

v8带来的优化（for...of代替forEach, Map和 Set替代Object、includes替代indexOf）
默认使用更快的md4 hash算法
webpack AST 能够直接从 loader传递给 AST,减小解析时间
使用字符串方法代替正则表达式

多进程/多实例构建

资源并行解析可选方案

thread-loader ：官方
parallel-webpack
HappyPack

使用HappyPack解析资源

原理：每次webpack解析一个模块，HappyPack会将它及它的依赖分配给worker线程中
代码示例

exports.plugins = {
	new HappyPack({
		id:'jsx',
		threads:4,
		loaders:['babel-loader']
	}),
	new HappyPack({
		id:'styles',
		threads:2,
		loaders: ['style-loader','css-loader','less-loader'] 
	})
}

使用thread-loader解析资源

每次webpack解析一个模块，thread-loader会将它及它的依赖分配给worker线程中
代码示例

module.exports = {
	...,
	module:{
		rules:[
			{
				test:/.js$/,
				use:[
					{
						loader:'thread-loader',
						options:{
							workers:3
						}
					},
					'babel-loader'
				]
			}
		]
	}
}

并行压缩

使用 parallel-uglify-plugin插件

代码示例

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
	plugins:[
		new ParallelUglifyPlugin({
			uglifyJS:{
				output:{
					beautify:false,
					comments:false
				},
				compress:{
					warning: false,
					drop_console: true,
					collapse_vars: true,
					reduce_vars: true
				}
			}
		})
	]
}

使用uglify-webpack-plugin开启 parallele参数。

代码示例：

const UglifyPlugin = require('uglify-webpack-plugin');
module.exports = {
	plugins:[
		new UglifyPlugin({
			uglifyOptions:{
				warning:false,
				parse:{},
				compress:{},
				mangle:true,
				output:null,
				toplevel: false,
				nameCache:null,
				ie8:false,
				keep_fnames: false
			},
			parallel:true
		})
	]
}

terser-webpack-plugin开启parallel参数。

代码示例

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
	optimization:{
		minimizer:[
			new TerserPlugin({
				parallel:4
			})
		]
	}
}

分包:设置externals

思路：将react，react-dom基础包经过cdn引入，不打入bundle中。
方法：使用 html-webpack-externals-plugin
代码示例：

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
plugins:[
	new HtmlWebpackExternalsPlugin({
		externals:[
			{
				module:'react',
				entry:'//11.url.cn/now/lib/15.1.0/react-width-addons.min.js?_bid=3123',
				global:'React'
			},	
			{
				module:'react-dom',
				entry:'//11.url.cn/now/lib/15.1.0/react-dom.min.js?_bid=3123',
				global:'ReactDOM'
			}
		]
	})
]

进一步分包：预编译资源模块

思路:将react，react-dom，redux， react-redux基础包和业务基础包打包成一个文件
方法：使用DLLOPlugin 进行分包，DllReferencePlugin对 manifest.json引用。
使用DLLPlugin进行分包

const path = reqire('path');
const webpack = require('webpack');
module.exports = {
	context:process.cwd(),
	resolve:{
		extensions:['.js','.jsx','.json','.less','.css'],
		modules:[__dirname,'node_modules']
	},
	entry:{
		library:[
			'react',
			'react-dom',
			'redux',
			'react-redux'
		]
	},
	output:{
		filename:'[name].dll.js',
		path:path.resolve(__dirname,'./build/library'),
		library:'[name]'
	},
	plugins:[
		new webpack.DllPlugin({
			name:'[name]',
			path:'./build/library/[name].json'
		})
	]
}

使用DllReferencePlugin引用manifest.json【在webpack.config.js中使用】

module.exports = {
	plugins:[
		new webpack.DllReferencePlugin({
			manifest:require('./build/library/manifest.json')
		})
	]
}

webpack-2

构建配置抽离成npm包的意义

通用性

可维护性

质量

构建配置管理的可选方案

构建配置包设计

冒烟测试

执行

git提交

版本规范

webpack构建速度和体积优化策略

stats

speed-measure-webpack-plugin:速度分析

webpack-bundle-analyzer：分析体积

使用高版本的webpack和nodejs。

多进程/多实例构建

并行压缩

分包:设置externals

进一步分包：预编译资源模块

`speed-measure-webpack-plugin`:速度分析

`webpack-bundle-analyzer`：分析体积