一、概述

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

webapck 打包体积优化策略的更多相关文章

  1. 【手把手学习flutter】Flutter打Android包的基本配置和包体积优化策略

    [手把手学习flutter]Flutter打Android包的基本配置和包体积优化策略 关注「松宝写代码」,回复"加群" 加入我们一起学习,天天向上 前言 因为最近参加2020FE ...

  2. webpack打包体积优化

    优化: 1:外部引入模块(cdn)     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...

  3. webpack 与 vue 打包体积优化

    webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...

  4. vue打包体积优化之旅

    webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...

  5. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  6. redis 持久化策略、aof配置、测试、手动持久化、aof文件体积优化

    redis持久化策略 1.数据文件.rdb 2.更新日志.aof 设置aof 1.命令方式config set appendonly noconfig rewrite2.配置文件方式 redis持久化 ...

  7. webpack4.0打包优化策略整理小结

    本文转载于:https://www.jb51.net/article/137449.htm 介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资 ...

  8. Vue项目上线环境部署,项目优化策略,生成打包报告,及上线相关配置

    Node.js简介 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量 ...

  9. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

随机推荐

  1. Spring Websocket实现文本、图片、声音、文件下载及推送、接收及显示(集群模式)

    相关环境 Nginx,Spring5.x当前(要选择4.0+),tomcat8.x,Quartz 2.x集群(实际运用是Quartz的集群模式和单机模式共存的) 测试面页:http://sms.rey ...

  2. apache路由端口配置

    <VirtualHost *:80> ServerName a.com ProxyPreserveHost On ProxyRequests On ProxyPass / http://1 ...

  3. 7z压缩与解压命令

    在写很多工具的时候,可能会用到7z命令来进行压缩与解压操作.这里记录二个比较常用的操作:压缩.解压.   在dos窗口下输入7z命令,会显示7z的使用参数详情: 7-Zip 9.10 beta  Co ...

  4. sys.usb.config webcam

    setprop persist.sys.usb.config webcamecho 0 > /sys/devices/virtual/android_usb/android0/enableech ...

  5. Button 自定义图片，代码绘制样式，添加音效的方法

    Button自己在xml文件中绑定监听器 <!-- 设定onclick属性,然后在activity中定义相应的方法 --> <!-- 通过xml布局中通过button的android ...

  6. Calendar获取当天的初始时间，当月的初始时间，当年的初始时间

    如下:

  7. HashMap 与 ConcurrentHashMap

    1. HashMap 1) 并发问题 HashMap的并发问题源于多线程访问HashMap时, 如果存在修改Map的结构的操作(增删, 不包括修改), 则有可能会发生并发问题, 表现就是get()操作 ...

  8. 连接sqlServer数据库&jpa调用存储过程Java获取存储过程返回的多个结果集JAVA调用sqlserver存储过程的实现（返回多个结果集的实现）jdbc多结果集（getMoreResults）

    存储过程: BEGIN select * from teacher; SELECT * FROM student; END public Object GetMyBOProjectProductLis ...

  9. google chrome 删除重复的书签 about sync

    之前 由于 谷歌 同步的不智能,且不询问用户同步方法和细节,导致我的书签包括了大量重复的书签,想去除重复的书签. 由于谷歌书签文件 存储在:C:\Documents and Settings\Admi ...

  10. jetty+mongodb 配置session外部数据库存储

    monbgodb简介 主页 http://www.mongodb.org/ oschina.net 介绍页 http://www.oschina.net/p/mongodb MongoDB是一个介于关 ...