初级分析 stats

webpack 内置 stats（构建统计信息）：可以分析出速度和体积大小

但是哪个组件比较大没有办法分析出来、哪个loader 执行的比较慢

速度分析

speed-measure-webpack-plugin： 分析每个插件和loader的耗时

体积分析

webpack-bundle-analyzer

直观图中，面积越大，占的体积越大

使用高版本的node 和 webpack

webpack4 做了哪些优化？

• 内部使用V8，对原生的js 语法做了很多优化
• 默认使用最快的md4 hash 算法
• webpack AST可以直接从loader传递给AST，减少解析时间
• 字符串替代正则

速度提升

多进程/多线程 打包

happyPack（webpack3） – 不在维护

每次webpack 解析一个模块,happyPack 会将它及它的依赖分配给work线程中

thread-loader webpack4

{
    test: /.js$/,
    use: [
        'thread-loader',
        'babel-loader'
    ]
}

并行压缩代码

1. parallel-webpack-plugin
2. uglify-webpack-plugin 设置 parallel 参数（true/false） terser-webpack-plugin 一样的

分包：预编译资源模块

利用 html-webpack-externals-plugin,必须指定一个CDN

利用DLLPlugin，对多个组件/框架库进行提取，生成一个manifest.json文件，是对分离出来的包进行的描述

缓存：提升二次构建速度

• 设置 babel-loader 的缓存
• terserWebpackPlugin 开启缓存
• 模块的缓存 hardSourceWebpackPlugin

缩小构建目标

1. babel-loader 不解析node_modules 包，配置的时候添加excludes
2. 优化resolve.modules 减小模块层级
3. resolve.extensions 后缀，.js
4. 合理使用alias
5. resolve.mainFields 入口文件

Tree-shaking 无用Css代码删除

purgecss-webpack-plugin

体积优化

压缩图片

使用 image-webpack-loader

动态 polyfill

babel-polyfill 打包出来的页面体积特别大

polyfill 是针对于手机，有些手机不需要，目标就是针对不同的手机 获取不同的polyfill

方案：polyfil service，

原理：打开页面，通过 use agent 获取手机型号，请求不同的polyfil

如何使用 请求polyfillService CDN

体积优化其他方案

• scope Hoisting
• Tree-shaking
• 公共资源分离