webpack4.0打包的时候一些技巧

4.0的webpack要比之前的版本强大的不是一点点

打包的时候也做了很多优化

然后说一些这段时间发现的有趣的技巧

1. 打包出来的文件很大,不知道是什么原因可以用 webpack-bundle-analyzer

很牛逼的分析工具,能知道打包出来的文件的都来自于属什么地方,每个有多大

使用方法很简单

1. 引入

2. 放到插件里

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
config.plugins.push(new BundleAnalyzerPlugin()
)

然后打包之后就会在浏览器弹出页面

比如我这个就是在告诉我highlightjs太大了,700多kb这种解决方案,一般是想办法抽离一部分highlight

这个玩意很炫酷,也很方便,强烈推荐

2. 公共模块分离

optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: ‘initial‘,
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0
                },
                vendor: { // 将第三方模块提取出来
                    test: /node_modules/,
                    chunks: ‘initial‘,
                    name: ‘vendor‘,
                    priority: 10, // 优先
                    enforce: true
                }
            }
        }
    }

webpack4.0的拆分变得人性化多了,可以很方便的把node_modules里的公共功能抽离出来,抽离出来不会有错的,客户端缓存起来,这部分是不会变动的

3. 压缩代码 compression-webpack-plugin

使用mode=production本身是会压缩的,但是这个压缩只是代码压缩,而浏览器其实是支持gzip和其他各种格式的压缩文件的,我们完全可以给浏览器一个压缩包的

使用这个插件压缩成gzip会使得代码体积再减小一两倍之多。用法也很简单

const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘)
config.plugins.push(
    new CompressionWebpackPlugin({
        asset: ‘[path].gz[query]‘,
        algorithm: ‘gzip‘,
        test: new RegExp(‘\\.(js|css)$‘),
        threshold: 10240,
        minRatio: 0.8
    })
)

当然这个玩意前提是要有个服务器支持的哦

一般的做法是我们请求某个js资源的时候,配置返回为压缩好的压缩包而不是js

就介绍这三个啦,如果你的webpack里还没有用过这三种优化,那就赶快试试吧。。

原文地址:https://www.cnblogs.com/sowhite/p/9255261.html

时间: 2024-11-05 21:54:47

webpack4.0打包的时候一些技巧的相关文章

手把手带你掌握新版Webpack4.0

课程介绍:Webpack 目前无论在求职还是工作中,使用越来越普及.而想要学懂,学会Webpack更绝非易事.本课程完整讲清最新版本下的 Webpack 4 知识体系,通过 基础 + 实例 + 原理代码编写 + 复杂案例分析 完成Webpack4的分析与讲解.更重要的是让你对整个前端项目的构建有一个全局化的认识,实现能力思想双升级. 课程目录:第1章 课程导学(打消你的学习疑虑)掌握Webpack越来越成为前端工程师的标配技能,本章会对课程整体进行介绍,打消你的学习疑虑.1-1 课程导学 第2章

webpack4.0在Mac下的安装配置及踩到的坑

一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用.可以将多种静态资源 js.css.less 转换成一个静态文件,减少了页面的请求. ? webpack4.0 安装与环境配置在安装webpack4.0之前,需要安装node,nod

webpack4.0各个击破(2)—— CSS篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定

webpack4.0各个击破(4)—— Javascript & splitChunk

目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 代码混淆压缩 四. 细说splitChunks技术 4.1 参数说明 4.2 参数配置 4.3 代码分割实例 五. 参考及附件说明 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建

webpack4.0各个击破(5)—— Module篇

webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 使用webpack对脚本进行合并是非常方便的,因为webpack实现了对各种不同模块规范的兼容处理,对前端开发者来说,理解这种实现方式比学习如何配置w

webpack4.0各个击破(9)—— karma篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. webpack与自动化测试 webpack对应的关键词是模块化,它的主要任务就是打包和管理模块,所以首先需要明确的概念就是webpack之所以关联自动化测试,是因为它能够为测试脚本提供模块管理的能力,

webpack4.0各个击破(10)—— Integration篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. Integration 下文摘自webpack中文网: 首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自动化处

前端最火工具webpack4.0中级教程

<webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的博文有本质的区别,不信你读读看. 一.webpack是什么 中文版官方网址:www.webpackjs.com webpack是前端最火的打包工具,是大前端自动化工厂的重要组成部分.上面的LOGO已经非常形象地表达了webpack所做的最主要的事情--打包,尽管它为非常多的工具提供了适配接口,但官网仍然推荐将

创建自己的library类库包并使用webpack4.x打包发布到npm

我们在开发过程中,可能经常要使用第三方类库,比如jquery.lodash等.我们通过npm,下载安装完之后,就可以使用了,简单方便.我们自己可以创建一个类库,然后供其他人这样安装使用吗?当然是可以的. 下面我们就来说说. 1. 创建自己的类库 index.js import numRef from './ref.json' const numberWord = () => { const numToWord = (num) => { let returnValue = _.reduce(nu