webpack打包优化点
1. noParse
作用主要是过滤不需要解析的文件,比如打包的时候依赖了三方库(jquyer、lodash)等,而这些三方库里面没有其他依赖,可以通过配置noParse不去解析文件,提高打包效率。
是module中的一个属性,设置一个正则表达式,过滤多个库以|分割
module: {
noParse: '/jquery|lodash/',
// rules:[]
}
2. 包含和排除目录
指定loader解析的规则,配置包含和排除目录一般两者写其一就行。
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'], // 预设,转换js语法
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }], // 解析类的装饰器
["@babel/plugin-proposal-class-properties", { "loose": true }], // 解析类的属性
"@babel/plugin-transform-runtime", // 解析promise,Generator等新的API
]
}
},
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
3. IgnorePlugin
该插件是webpack的内置插件,用于忽略某些特定的模块,不被webpack打包进去。
在实际开发项目时,moment库是非常常用的处理时间的库,虽然设置了语种为中文zh-cn,但是在打包的时候,还是会将所有语言都打包进去。就导致包很大,打包速度慢,locale 目录中存放的是多语种的语言包,不希望全部被打包进文件。此时就可以配置下IgnorePlugin
// src/index.js
import moment from 'moment'
// 忽略locale后,就必须手动单独引入需要的语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn'); //设置中文
let r = moment().endOf('day').fromNow();
console.log(r);
// webpack.config.js
let Webpack = require('webpack');
module.exports = {
plugins:[
new Webpack.IgnorePlugin(/\.\/locale/,/moment/), // locale 目录中存放的是多语种的语言包,不希望全部被打包进文件
]
}
4. happypack
多线程打包,多用于大型项目,因为在项目很小的时候,效果反而会慢,因为而分配线程,也会消耗时间。
npm install happypack
let HappyPack = require('happypack');
module.exports = {
// ...
module:{
rules:[
{
test:/\.js$/,
use:'HappyPack/loader?id=js' // id=js 代表打包js
},
{
test:/\.css$/,
use:'HappyPack/loader?id=css' // id=css 代表打包css
}
]
},
plugins:[
new HappyPack({
id:'css', // 打包css
use:['style-loader','css-loader']
}),
new HappyPack({
id:'js', // 打包js
use:[{ // 原本rules中 loader的配置即可
loader:'babel-loader',
options:{
presets:['@babel/presets-env', '@babel/presets-react']
}
}]
})
]
}
5. DllPlugin动态链接库
之前专门整理过完整的一篇关于DllPlugin动态链接库
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack性能优化方式之dll--- webpack.dll.config.js
6. 热更新
之前专门整理过完整的一篇关于webpack热更新
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack4.15.1 学习笔记(三) — 模块热替换HMR
7. 开发环境 tree-shaking
之前专门整理过完整的一篇关于webpack tree-shaking
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack4.15.1 学习笔记(四) — Tree shaking
8. 抽离公共代码
之前专门整理过完整的一篇关于webpack抽离公共代码
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack4.15.1 学习笔记(六) — 代码拆分(Code Splitting)
9. 懒加载
之前专门整理过完整的一篇关于webpack懒加载
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack4.15.1 学习笔记(七) — 懒加载(Lazy Loading)
webpack打包优化点的更多相关文章
- Webpack 打包优化之速度篇
在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- 记一次webpack打包优化
未进行打包优化的痛点: 随着项目的不断扩大,引入的第三方库会越来越多,我们每次build的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发. 解决思路: 第三方库我们只是引入到项目里来,一般不 ...
- webpack打包优化之外部扩展externals的实际应用
目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...
- [转] Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- webpack打包优化并开启gzip
应用场景:项目使用webpack2.x进行打包,打包后静态资源通过nginx转发配置: 问题:webpack打包后的资源文件特别,特别大,没打包之前页面一个页面js有2M左右(其中已经抽离了css)? ...
- 基于CommonsChunkPlugin,webpack打包优化
前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.但是打包的文件还是很大,特别是 ...
- webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)
如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...
- (webpack系列二)webpack打包优化探索
虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条 ...
随机推荐
- jenkins自动触发构建
1. 安装jenkins cat /etc/yum.repos.d/jenkins.repo [jenkins] name=Jenkins baseurl=http://pkg.jenkins.io/ ...
- 安装gitlab客户端
1. 下载客户端软件包 https://pan.baidu.com/disk/home#/category?type=6&vmode=list 安装顺序: Git-2.13.3-64-bit. ...
- NC19115 选择颜色
NC19115 选择颜色 题目 题目描述 \(n\) 个人排成一个环形,每个人要从 \(c\) 种颜色中选择一个. 牛牛希望相邻的人选择的颜色是不同的 问有多少种方案. 输出方案数对 \(10007\ ...
- 10 MySQL_字符串函数和数学函数
字符串函数 1. 字符串拼接 concat('aa','bb') ->aabb; 查询emp表中 员工姓名 和工资 工资后面显示单位元 select name,concat(sal,'元') f ...
- mysql导出导入数据库和表学习笔记
一.mysql导出数据库和表 1.导出单个数据库 mysqldump [-h Host] -u Username -p [PASSWORD] db_name > db_name.sql 2.导出 ...
- Odoo14 js 怎么获取图片url链接
上内部代码: 1 _getImageURL: function (model, field, id, placeholder) { 2 id = (_.isArray(id) ? id[0] : id ...
- odoo14 入门解刨关联字段
Odoo中关联字段是用来绑定表与表之间主从关系的. 主从关系指: 首先必须要明白id的存在的意义,它具备"唯一"的属性,也就是表中所有记录中该字段的值不会重复. 假设表A存储是身份 ...
- RPM方式安装GreatSQL 8.0.25-16
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 目录 一.系统信息 1.确认OS信息 2.OS优化调 ...
- 产品 | GreatSQL,打造更好的MGR生态
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 用 ...
- 在生鲜零售业,DolphinScheduler 还能这么玩!
点击上方 蓝字关注我们 ✎ 编 者 按 2021 年,Apache DolphinScheduler 社区又迎来了新的蓬勃发展,社区活跃度持续提高.目前,项目 GitHub Star 已达 6.7k, ...