模块引入了插件如何拆分出来 .. ?

来源:4-1 项目通用模块设计和拆分概要(通用JS工具,通用布局,通用样式,通用导航,通用提示页)

木刻er

2017-11-19

假设entry下面现在有index , login , 和 register 三个模块 ,  

我在index 和 login这两个里面都require了 moment(日期插件)模块

那打包出来后  index和login里面都合并了moment的代码 , 导致文件体积很大 , 有没有什么好的解决办法

尝试一 :  新增一个vender

entry: {
    'common': ['./src/page/common/index.js'],
    'index': ['./src/page/index/index.js'],
    'login': ['./src/page/login/index.js'],
    'register': ['./src/page/login/register.js'],
    'vender':['moment']
  }

虽然打包后后会把moment里的代码保存成vender.js 但是index.js和login.js里面还是会有moment的代码

尝试二 : 把moment放在common里面

  entry: {
    'common': ['./src/page/common/index.js','moment'],
    'index': ['./src/page/index/index.js'],
    'login': ['./src/page/login/index.js'],
    'register': ['./src/page/login/register.js'],
  }

这回打包出来index.js和login.js里面干净了 , moment的代码合并到了base.js里面 , 但是把这些插件代码放到base.js里是不是不太好 , 有没有什么更好的方案


写回答

1回答

Rosen

2017-11-20

webpack已经帮你处理这个问题了,除了你自己放进base的文件,它还会把引用次数较多的模块放进base,不用你自己去放(好像是三次以上,可以手动指定)

0
2
Rosen
回复
木刻er
那个时候就要手动控制了,对插件做归类,不过2M的文件经过丑化和gzip压缩也就大几百k,倒不用太担心
2017-11-20
共2条回复

真实数据对接 从0开发前后端分离的企业级上线项目

【毕设项目精品】前端实战,对接真实服务端数据,开发完整项目

4276 学习 · 4121 问题

查看课程