webpack面试题-性能优化

打包的注意事项，提高速度

要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则。
Npm模块使用者的环境是不确定的，很有可能并不支持ES6，所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。
Npm包大小应该是尽量小（有些仓库会限制包大小）
发布的模块不能将依赖的模块也一同打包，应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。
UI组件类的模块应该将依赖的其它资源文件，例如.css文件也需要包含在发布的模块里。

提高webpack构建速度

多入口情况下，使用CommonsChunkPlugin来提取公共代码

通过externals配置来提取常用库

利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们

引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。

使用Happypack 实现多线程加速编译

使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。

原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度使用Tree-shaking和Scope Hoisting来剔除多余代码

sourceMap

是一个映射关系，将打包后的文件隐射到源代码，用于定位报错位置

配置方式:

例如：devtool：‘source-map’加不同前缀意义：

inline:不生成映射关系文件，打包进main.js
cheap: 1.只精确到行，不精确到列，打包速度快 2.只管业务代码，不管第三方模块
module：不仅管业务代码，而且管第三方代码
eval:执行效率最快，性能最好
最佳实践：开发环境：cheap-module-eval-source-map线上环境：cheap-module-source-map

长缓存以及如何实现

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。

在webpack中，可以在output给出输出的文件指定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变

文件指纹是什么，怎么用

作用：

1. 版本管理：只有修改的文件才需要更改文件指纹
2. 提高访问速度：浏览器有缓存

文件指纹的类型

hash：整个项目的构架相关，只要项目文件有修改，整个项目构建的hash值就会更改

chunkhash：和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值

contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变

如何使用

module.exports = {
	output:{
		filename:'[name].[contenthash:8].js' // js文件设置文件指纹
	},
	module:{
		rules:[{
			test:/\.png$/,
			use:[{
			loader:'file-loader',
			options:{
				filename:'[name].[contenthash:8].[ext]' // 设置图片文件的文件指纹，其他文件的文件指纹与图片设置方式一致
			}
			}]
		}]
	}
}

占位符说明

占位符名称	含义
[ext]	资源后缀名
[name]	文件名称
[path]	文件的相对路径
[folder]	文件所在的文件夹
[contenthash]	文件内容hash，默认是MD5生成
[hash]	文件内容hash，默认是MD5生成
[emoji]	一个随机的指代文件内容的emoji