最近用ElementUI项目开发后台,发现构建完之后的包特别大,网上看了一些资料说要懒加载路由,懒加载组件( vue中路由懒加载和组件懒加载),这些我都有做。

比较明显的是我发现有一个chunk-vendors.***.js(950kb)和chunk-vendors.***.css(300kb)特别大,后来查资料发现它里面是专门用来放置一些库文件(node_modules下)的,因为我项目中也用到了例如lodash,qs,md5,vuedraggabled等插件,因此我估计是把这些插件全部打到一块了。

查资料说可以配置一个extends,然后单独引用那些js(CDN),但是我感觉太麻烦了,而且有些CDN和你项目插件的版本还不一样,容易有坑,我想,如果能把那些打到一块的(chunk-vendors.***.js)内容分开,每个插件都各自为一个vendors不就好了么?果然还真有这样的配置(vue.config.js):

这个在Webpack4之SplitChunksPlugin一些参数的理解里面有讲配置参数的含义。

再次打包,果然就变成多个chunk-vendors.***.js了,表示那些集中在一块的插件全部都散开了,但是还是会发现其中一个比较大的chunk-vendors.***.js(450kb)和chunk-vendors.***.css(233kb),看了看,里面全部都是elementui的一些东西,因为我的项目中elemtnUI是全局加载的,所以我估计把整个elementUI都打进去了。

这里就要用到elementUI官网提到的按需加载了,这个可以自行去elementUI官网去看,不过需要特别注意的就是,用了按需加载,那么就不用引入全局的elementUI的css了(最好去掉全局elementUI的css引用,体积比较大),它的每个控件都会去引用各自的需要css。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字