跳到主要内容

使用场景

  • webpack可以用来做自动化打包，处理es6转换，图片处理，css样式压缩等等

压缩处理​

  • js压缩 （减小 JS 文件的大小，加速加载速度）
    • uglifyjs-webpack-plugin
  • css压缩
    • optimize-css-assets-webpack-plugin 插件
  • html文件压缩
  • 图片压缩
    • 通过url-loader小于 limit 一定限制的图片可以转化成 base64 格式
    • 比较大的图片我们可以用 image-webpack-loader 来压缩图片

减少包的体积​

  • Tree Shaking
text
optimization: {
    usedExports: true
}
  • 代码分割
    • 也是在optimizaton属性的splitChunks去配置，
    • 也可以使用split-chunks-plugin插件去配置
text
optimization:{
//帮我们⾃动做代码分割
    splitChunks:{
        chunks:"all",//默认是⽀持异步，我们使⽤all
    }
}

排除无用的 CSS​

  • purgecss-webpack-plugin插件

预取/预加载模块​

(预取/预加载模块)prefetch/preload module​

  • prefetch(预取)：将来某些导航下可能需要的资源
  • preload(预加载)：当前导航下可能需要资源

prefetch 和 preload​

与 prefetch 指令相比，preload 指令有许多不同之处：

  • preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
  • preload 是以并行的方式加载，也就说多占了一个请求，对性能、响应时间请求会造成影响过慢
  • prefetch是浏览器闲置下载文件
  • preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
  • preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。
  • 浏览器支持程度不同。

  • 因此一般推荐使用prefetch，而不使用preload

  • webpackChunkName: 在 import 里以注释的形式为 chunk 文件取别名：

  • webpackPrefetch:也是以注释形式 对文件进行预取