一、概述

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. Android组件化方案

    Android组件化项目地址:Android组件化项目AndroidModulePattern Android组件化之终极方案地址:http://blog.csdn.net/guiying712/ar ...

  2. Emgu CV

    摄像头 Capture _capture = new Capture(0); _capture.SetCaptureProperty(Emgu.CV.CvEnum.CAP_PROP.CV_CAP_PR ...

  3. [转]缓慢但胜在稳健，HBase大势已成

    CSDN Hbase : http://www.csdn.net/tag/hbase 在NoSQL数据库领域,统治产品无疑当属MongDB和DataStax Enterprise(一个领先的Apach ...

  4. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  5. 自适应尺寸变化的meanshift跟踪

    近期在看meanshift方面的文章,看了一篇博文对这篇文章<Robust scale-adaptive meanshift for tracking>寄予非常高的评价,所以把这篇文章简要 ...

  6. AndroidManifest.xml文件解析(转帖)

    原帖地址:http://www.cnblogs.com/pilang/archive/2011/04/20/2022932.html 一.关于AndroidManifest.xml       And ...

  7. Java IO流关闭问题的深入研究

    转自:https://blog.csdn.net/maxwell_nc/article/details/49151005 前几天看了一篇文章(见参考文章),自己动手试了下,发现有些不一样结论,作博客记 ...

  8. 配置nginx到后端服务器负载均衡

    nginx和haproxy一样也可以做前端请求分发实现负载均衡效果,比如一个tomcat服务如果并发过高会导致处理很慢,新来的请求就会排队,到一定程度时请求就可能会返回错误或者拒绝服务,所以通过负载均 ...

  9. 微信小程序--后台交互/wx.request({})方法/渲染页面方法 解析

    小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) data: { logs:[] }, onLoad:function(){ this.getdata(); } ...

  10. [转]使用 ssh -R 穿透局域网访问内部服务器主机，反向代理 无人值守化

    原文: https://www.cnblogs.com/phpdragon/p/5314650.html ----------------------------------------------- ...