webpack前端代码优化插件

本文介绍Webpack的五大优化策略:简化模块ID、去除重复代码、chunks管理、单页应用优化及多页应用共享代码的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,简化

:new webpack.optimize.OccurenceOrderPlugin();
因为webpack打包原理:模块 块id ,它会根据id的使用频率和分布来得出最短id,将最短id分配给频率高的模块。还有个插件叫:new webpack.optimize.UglifyJsPlugin(); 不知道这个是干嘛的,说是可以压缩js。。

2,去重:new webpack.optimize.DedupePlugin();

如果你的项目用到很多依赖库,库文件里一定有很多代码是重复的,webpack会对这些文件进行去重,保证不会有重复的代码,并且会封装成一个函数,请求是调用,不会影响语义。

3,chunks 优化:

new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15}); //限制块的总数
new webpack.optimize.MinChunkSizePlugin({minChunkSize:10000}); //限制一块的最小容量
如果编码遇到很多分割点(ajax),这样就有很多细小的http请求,这样会占用http资源,通过以上两个插件可以合并管理这些模块。

4,单页: app拆分成很多chunk,chunk被路由加载,模块仅仅包含路由和一些库文件。这么做用户通过导航浏览效果很好,初始化页面还有两个请求,一个请求路由,一个加载当前内容。
5,多页:当编译一个多页面的app时,想着页面之间共享代码,只要和多个入口文件一起编译就好,

在插件中添加一个共用插件new CommonsChunkPlugin(“commons.chunk.js”); 入口文件中重复的js文件会统一放在这个commons.chunk.js里。
例如:
var CommonsChunkPlugin = require(“webpack/lib/optimize/CommonsChunkPlugin”);
module.exports = {
entry: {
p1:”./page1”,
p2:”./page2”,
p3:”./page3”,
ap1: “./admin/page1”,
ap2: “./admin/page2”,
}
output: {
filename:”[name].js”
}
plugins: [
new CommonsChunkPlugin(“admin-commons.js”,[“ap1”, “ap2”]),
new CommonsChunkPlugin(“commons.js”, [“p1”, “p2”, “admin-commons.js”])
]
};
可以初始化很多个块chunk,也可以堆叠块,

原文:http://webpack.github.io/docs/optimization.html#chunks

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值