(一)前言
我们在处理webpack打包优化时候,除开使用happypack和webpack-parallel-uglify-plugin加速babel编译构建,使用dll动态链接库,指纹缓存,页面切片,gzip压缩等优化,其实还可以设置devtool中的source maps进一步处理构建速度和生产包压缩大小。
(二)devtool
devtool官方解释
源映射由一大堆信息组成,可用于将压缩文件中的代码映射回原始源。您可以为每个压缩文件指定不同的源映射。
通过在优化文件的底部添加特殊注释,向浏览器指示源地图可用。
//# sourceMappingURL=/path/to/script.js.map
此注释通常由用于生成源映射的程序添加。如果启用了对源映射的支持并且开发人员工具已打开,则开发人员工具将仅加载此文件。
您还可以通过X-SourceMap在压缩的JavaScript文件的响应中发送HTTP标头来指定源映射。
源映射文件包含一个JSON对象,其中包含有关映射本身和原始JavaScript文件的信息。这是一个简单的例子:
{
version: 3,
file: "script.js.map",
sources: [
"app.js&#