Webpack高级 16 -- 减少代码体积

53 阅读1分钟

1 . TreeShaking

1 . 1 why?

1087.png

1 . 2 是什么?

1088.png

  • 用上什么(引入了什么),才会打包什么,其他不打包!!!

1 . 3 How?

1089.png

  • 只针对 ES Module

2 .减少 Babel 生成文件体积

2 . 1 why?

1090.png

2 . 2 是什么?

1091.png

2 . 3 How?

  • 下载包:
npm i @babel/plugin-transform-runtime -D
  • 配置:

1092.png

3 . Image Minimizer

3 . 1 why?

1093.png

3 . 2 是什么?(插件)

1094.png

3 . 3 How?

  • 下载包
npm i image-minizer-webpack-plugin imagemin -D
  - 两种模式:
            - 无损压缩:
                - npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin -D
                
           - 有损压缩:
                - npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin -D
                
                
  • 配置:

    • 先引入插件:

1095.png

配置项比较多!!

其包比较难下载: 可以去官网下载,然后移到文件里面

1096.png