webpack配置提取公共代码

公共代码提取功能是针对多入口文件的;

  背景:在pageA.js和pageB.js中分别引用subPageA.js和subPageB.js

  webpack.config.js文件:

 1 var path = require('path')
 2 module.exports = {
 3     entry:{
 4         pageA:'./src/pageA.js',
 5         pageB:'./src/pageB.js'
 6     },
 7     output: {
 8         filename: "[name].js",
 9         path:path.resolve(__dirname,'./dist')
10     },
11     optimization: {
12         splitChunks:{
13             cacheGroups: {
14                 vender:{
15                     test:/node_modules/,
16                     chunks:'initial',
17                     name:'vender',
18                     priority:10
19                 },
20                 utils:{
21                     chunks:'initial',
22                     name:'utils',
23                     minSize:0
24                 }
25             }
26         }
27     }
28 }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack是一个用于打包前端应用程序的工具,可以将多个模块打包成一个或多个文件,同时还支持代码分离、模块化、压缩等功能。下面是Webpack的基本配置和优化代码的说明: 1. 基本配置 (1)entry:入口文件,Webpack会从该文件开始递归解析依赖,生成打包后的文件。 (2)output:输出文件配置,指定打包后生成的文件路径和名称。 (3)module:模块加载器配置,用于加载各种类型的文件,如js、css、图片等。 (4)plugins:插件配置,用于扩展Webpack功能,如压缩代码提取公共模块、生成HTML模板等。 (5)devServer:开发服务器配置,可以自动编译代码并提供热更新等功能。 (6)resolve:模块解析配置,用于配置模块的搜索路径、别名等。 2. 优化代码 (1)使用Tree Shaking:Tree Shaking是Webpack 2引入的功能,用于去除无用的代码。只有被使用的代码才会被打包进最终的文件。 (2)使用Code Splitting:将代码拆分成多个块,按需加载,可以提高页面加载速度。 (3)使用动态导入:使用import()函数动态加载代码,可以根据需要加载不同的模块,提高性能。 (4)使用缓存:使用缓存可以避免重复打包已经打包过的代码,提高打包速度。 (5)使用异步加载:异步加载可以提高页面加载速度,特别是在处理大型应用程序时更为重要。 (6)使用压缩插件:压缩代码可以减小文件大小,提高加载速度。 (7)使用静态资源CDN:使用CDN可以将静态资源分布到多个服务器上,提高访问速度,减少服务器负载。 总之,通过合理的配置和优化,可以大大提高Webpack的性能和效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值