webpack速度优化和体积优化

974

初级分析 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
  • 公共资源分离