zoukankan      html  css  js  c++  java
  • webapck 打包体积优化策略

    一、概述

    1、Tree-shaking

    2、公共资源分离

    3、图片压缩

    二、Tree-shaking

    Tree-shaking:1个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到bundle里面去,Tree-shaking就是只把用到的方法打入bundle,没用到的方法会在uglify阶段被擦除掉。

    使用:webpack默认支持,在.babelrc里设置 modules: false即可

    三、公共资源分离

    目的:提取多页面公共JS chunk代码

    方法:

    (1)webpack3使用CommonsChunkPlugin

    (2)webpack4使用SplitChunksPlugin

    以下是webpack4示例:

    四、图片压缩

    方法:基于Node库的imagemin或者tinypng API;或者使用:配置image-webpack-loader

    以下是使用image-webpack-loader示例:

  • 相关阅读:
    python-Beautiful rose
    python-and和 or用法
    myspl数据库基础
    python 协程
    python-os 模块
    python-logging模块
    异常处理
    面向对象-类中的三个装饰器
    Flask初见
    django中的ContentType使用
  • 原文地址:https://www.cnblogs.com/mengfangui/p/10286130.html
Copyright © 2011-2022 走看看