vue项目依赖文件拆分

  • Post author:
  • Post category:vue



需求背景



在构建vue单页面项目时,会将所有依赖打包成一个文件,如果依赖文件过大,会影响页面渲染。

为了好的用户体验我们需要对依赖文件进行拆分,那么如何拆分呢?


解决方案



修改webpack的配置文件externals,从输出的依赖文件中排除某些依赖包,将被排除的依赖包单独引入到html页面中。


示例

1)webpack配置文件修改

externals: {
  'vue': 'Vue',
  'element-ui': 'ElementUI',
}

2)去除main.js中element-ui的引入

在这里插入图片描述

3)html页面中引入vue、element-ui文件

在这里插入图片描述


依赖文件拆分前后对比图


在这里插入图片描述



版权声明:本文为yihanzhi原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。