打包构建
2019-05-27 本文已影响0人
smartHui
1、babel中:组件库的按需加载
![](https://img.haomeiwen.com/i11092615/ffae9f31ca00b9e5.png)
2、路由的webpackChunkName,路由的懒加载和拆包
![](https://img.haomeiwen.com/i11092615/70f1434fb3502bcd.png)
3、loadash的引用。使用第一种方式,引用的loadash具体的方法(只打包具体的方法的代码,这样包的大小会小一些),而使用第二种方式,是把loadash引进来,使用它里面的一种方法(这样会loadash整个的库都会打包进来)
目前:手动这样引入,loadash官方也提供webpack的配置
![](https://img.haomeiwen.com/i11092615/d4211d3fbd002c7e.png)
cli提供的命名npm run build -- --report,得到一个报告report.html
4、图标的按需加载 https://github.com/vuecomponent/ant-design-vue/issues
缺点:每一个图标都需要使用S1的方法引入,不能漏
S1.在src下,新建icons.js文件,把需要用到的图标放在这个文件里面
![](https://img.haomeiwen.com/i11092615/8302b45a6740c476.png)
S2.vue.config.js配置
![](https://img.haomeiwen.com/i11092615/02cde2c73875edde.png)
5、moment优化https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
使用webpack插件,忽略moment语言包,所以需要使用中文时,需要单独引入(默认英文)【见图二】
![](https://img.haomeiwen.com/i11092615/2f59c8989cdbbb45.png)
![](https://img.haomeiwen.com/i11092615/9d36cee0423884c5.png)
6、chart按需加载:只引入柱状图和title
![](https://img.haomeiwen.com/i11092615/daf9302af46946f6.png)
weback配置,以及本身库提供就的按需加载的功能