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示例:

  • 相关阅读:
    intellij常用快捷键
    C++ 虚函数详解
    第七周作业
    第六周作业
    第四周作业
    第三周作业
    第二周作业
    第一周作业附加作业
    第一周作业。
    第0次作业
  • 原文地址:https://www.cnblogs.com/mengfangui/p/10286130.html
Copyright © 2011-2022 走看看