详解组件库的webpack构建速度优化(4)
万事俱备,赶紧跑起来
> DONE Compiled successfully in 10792ms
不错不错,只需要10s了,打开浏览器看看,也没问题。嗯 不错。
关掉服务,试试看原来的 dev 命令是不是也没问题,嗯,终端是没问题,但是浏览器上报错了 ???(黑人问号脸)
好像是 webpack
不能正常的处理,最后是改成了下面这样才能正常工作
function loadDocs(path) { return r => require.ensure([], () => { if (process.env.RUN_ENV === 'component') { r(require(`./docs${process.env.component}.md`)); } else { r(require(`./docs${path}.md`)); } } ); }
另外,除了md文件只需要处理一个组件的之外,组件源码也有很多是不需要处理的,所以,继续修改下代码
应用的入口处将全局引入ui库的方式换成按需
// 原来的代码 import Vue from 'vue' import gsui from 'components' // ... Vue.use(gsui)
// 修改后的 import Vue from 'vue' // ... if (process.env.RUN_ENV === 'component') { // 一些页面共用的组件 // 只能用require 不能import 因为是静态处理 Vue.use(require(`components/submenu`).default); Vue.use(require(`components/menu`).default); Vue.use(require(`components/layout`).default); Vue.use(require(`components/menu-item`).default); Vue.use(require(`components/header`).default); Vue.use(require(`components/icon`).default); Vue.use(require(`components/tooltip`).default); Vue.use(require(`components/modal`).default); Vue.use(require(`components/message`).default); Vue.use(require(`components${process.env.component}`).default); } else { // 不是单组件开发模式引入全部 Vue.use(require('components').default); }
优化后的单组件开发模式和全局开发模式的对比
但是很快就感到不实用,因为有很多组件是需要依赖其他组件的,有时候需要看其他组件的文档,单组件模式就没法做到了
只能再找别的手段了
意外发现,原来是vue-loader的版本原因带来的性能消耗
前天也不知道在哪发现了一个UI库at-ui,下意识点进去看了下他们的构建配置,发现和我们的很像(其实webpack配置也都差不多的),也是用了 vue-markdown-loader ,出于好奇,clone了下来本地构建了一下。结果出乎意料,他们的构建只需要 16s 16s 16s 怎么会差这么多,看了下他们的文档,还是中文和英文双份的(我们的组件库暂时没有英文文档),虽然组件没有我们的多,但是文档绝对是多几十个的,而且耗时不也是在md文件的解析上吗(再次问号脸)。再仔细看了他们的配置和对md文件的处理,确实对md文件的处理代码会少很多,但是这是因为支持的写法不同,而且也不至于导致时间相差那么多。