6.17 提升webpack的打包性能，DllPlugin(配置Library以及Dllplugin,DllReferencePlugin)，多页面打包配置，重复import会导致体积变大吗

1、尽可能让工具版本新 webpack node npm
2、对无关模块/文件夹在loader中进行过滤 exclude: /node_modules/
2.1、 或者，include: path.resolve(__dirname, ‘…/src’)
3.1、进行plugins配置，比如MiniCssExtractPlugin // 抽取js中的css为单独css文件
3.2、进行optimization的配置，比如minimizer:

2、DllPlugin 打包性能优化

优化角度：对第三方库模块单独进行打包（只打包一次）

实现过程一：只打包一次:
先创建第三方模块打包配置 webpack.dll.js

cnpm i add-asset-html-webpack-plugin -D
上述库是对html-webpack-plugin 库进行的拓展

在webpack.common.js 公共打包配置中

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')  // +

plugins: [
		/* 省略 */
		new AddAssetHtmlWebpackPlugin({
			filepath: path.resolve(__dirname, '../dll/vendors.dll.js')  // 指你要往生成的Html中加入什么内容
		}) // +
	]
}

在进行打包即生成html文件，里面已经将vendor.dll.js以script标签注入项目，且全局挂载 vendors变量（挂载的变量vendors是提供给webpack.common.js中的DllRerfencePlugin使用的）

实现过程二、让webpack使用打包的生成vendors.dll.js文件
先在 webpack.dll.js中生成对应的映射文件

// 在 webpack.dll.js中
const webpack = require('webpack') // + 引入webpack.DllPlugin生成映射文件
plugins: [
	new webpack.DllPlugin({
		name: '[name]', // + 对生成的库 进行dll插件分析
		path: path.resolve(__dirname, '../dll/[name].manifest.json'), 
		// + 将库里边一些第三方模块的映射关系放到 [name].manifest.json的文件下
	})
]

运行 npm run build:dll (“webpack --config ./build/webpack.dll.js”)
就会在dll文件夹下多出一个映射关系文件

有了映射文件，在webpack打包的时候就可以结合映射文件以及生成的全局变量，来对需要打包的源代码进行分析。
一旦发现你打包的源代码里面用到了映射文件中已有的文件，则直接使用vendors.dll.js 中的内容，而不会去node_modules里引入该模块。

实现过程三、使webpack打包生成的manifest映射文件去定位js文件

在 webpack.common.js中

	plugins: [
		new webpack.DllReferencePlugin({
			manifest: path.resolve(__dirname, '../dll/vendors.manifest.json')  // +
		})
	],

当你引入第三方模块的时候（import _ from ‘lodash’），DllReferencePlugin这个插件会帮你从 vendors.manifest.json中去帮你找映射关系，若找到，则会根据映射关系，直接定位到dll文件夹下的vendors.dll.js，并采用全局变量的方式（vendors）去拿。若未找到映射关系，则会去node_modules里拿该模块

拓展：
webpack.dll.js中配置多个入口文件

entry: {
	vendors: ['lodash'],
	react: ['react', 'react-dom']
},

相应的，webpack.common.js中也需配置多个new AddAssetHtmlWebpackPlugin和new DllReferencePlugin插件

new AddAssetHtmlWebpackPlugin({
	filepath: path.resolve(__dirname, '../dll/vendors.dll.js')  
}),
new AddAssetHtmlWebpackPlugin({
	filepath: path.resolve(__dirname, '../dll/react.dll.js')  // +
}),
new webpack.DllReferencePlugin({
	manifest: path.resolve(__dirname, '../dll/vendors.manifest.json')
}),
new webpack.DllReferencePlugin({
	manifest: path.resolve(__dirname, '../dll/react.manifest.json') // +
}),

考虑到业务规模大，那么一个个实例化插件，太耗费世间，则采取智能以下措施。
通过nodejs分析dll文件夹下到底有几个js文件几个manifest文件，动态往plugins里new plugin

引入fs模块进行分析

则可以进行循环遍历数组 构造 new plugin

最后修改配置项里的plugins: plugins即可

一些提升webpack性能操作

6、控制包文件大小
7、多进程打包：thread-loader，parallel-webpack，happypack
8、合理运用sourceMap
9、结合stats.json等，分析打包结果
10、开发环境内存编译 即 devServer
11、开发环境无用插件剔除。开发环境mode应是development。
注：mode: production 压缩代码，会降低webpack的打包速度

三、多页面打包配置

需求分析：
页面配置规则相同的前提下。
要生成2个html文件。

操作：
1、添加第二个入口文件

运行 npm run build ，仅生成一个html文件，且其中将main 和 list均引入。

配置HtmlWebpackPlugin的filename

继续打包 npm run build ，发现生成两个html文件，可里面script是两个入口的js文件，是有问题的。

添加配置项chunks

继续打包 生成的js文件，只含有上述红线指定的js文件。正确。

自动化构建优化

或者如 DellLee老师的操作，当entry是手填的，那么无需fs遍历src文件夹了。

四、重复import相同的模块会使webpack体积变大吗

这里截图他人的阐述。