vue项目依赖文件拆分

Dear 丶 2022-12-17 05:29 201阅读 0赞

**需求背景**：  
在构建vue单页面项目时，会将所有依赖打包成一个文件，如果依赖文件过大，会影响页面渲染。  
为了好的用户体验我们需要对依赖文件进行拆分，那么如何拆分呢？

**解决方案**：  
修改webpack的配置文件externals，从输出的依赖文件中排除某些依赖包，将被排除的依赖包单独引入到html页面中。

**示例**：

1）webpack配置文件修改

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

2）去除main.js中element-ui的引入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]  
3）html页面中引入vue、element-ui文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left 1]

**依赖文件拆分前后对比图**  
![在这里插入图片描述][20201022104411517.png_pic_left]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/5caf72c35b5e4209abe508cc65505ae0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221123/970840cfdfb445ff94572b2de9300847.png
[20201022104411517.png_pic_left]: /images/20221123/0d1022d17be04eed9536432da9c16e79.png

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关项目代码拆分结构

最上层是一个POM类型作用对整个商城项目中的资源进行统一管理下面是继承子项目（ pom类型）再继承一个工具类（pom类型) 然后每个子项目拆分(controller map

╰半橙微兮°/ 2023年06月22日 13:59/ 0 赞/ 23 阅读

相关 vue项目依赖文件拆分

需求背景：在构建vue单页面项目时，会将所有依赖打包成一个文件，如果依赖文件过大，会影响页面渲染。为了好的用户体验我们需要对依赖文件进行拆分，那么如何拆分呢？解

Dear 丶/ 2022年12月17日 05:29/ 0 赞/ 202 阅读

相关 avue从vue文件中拆分option

拆分方式一：（源vue文件）index.vue <avue-crud :data="data" :option="option"></avue-crud>

迷南。/ 2022年10月07日 04:55/ 0 赞/ 460 阅读

相关 python拆分excel文件

当我们遇到一些很大的文件时，如果把所有的数据全部加入到内存当中处理，当文件比较小时还好，但是问价你很大时，这种方式是很不好的，当超过十几个G的文件时，我们该如何处理呢？ py

布满荆棘的人生/ 2022年05月27日 09:56/ 0 赞/ 419 阅读

相关文件拆分、合并

import java.io.; public class IOTest { public static void

深藏阁楼爱情的钟/ 2022年05月24日 07:55/ 0 赞/ 250 阅读

相关如何拆分PDF文件，PDF如何拆分页面

　　PDF（Portable Document Format的简称，意为便携式文档格式）起初PDF只被看作是一种页面预览格式，而不是生产格式。然而市场的感觉并非如此，市场期望转

淡淡的烟草味﹌/ 2022年01月13日 14:28/ 0 赞/ 435 阅读

相关 vue组件的拆分

vue组件的拆分 <div class="div">  <moban></mo

超、凢脫俗/ 2021年12月19日 04:05/ 0 赞/ 310 阅读

相关 vue路由分文件拆分管理

这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那

雨点打透心脏的1/2处/ 2021年09月19日 16:22/ 0 赞/ 394 阅读

相关 vue项目笔记（25）-公共组件拆分

公共组件拆分（画廊组件） vue项目开发中，有些组件不仅仅是一个页面需要使用，这时候我们可以将其抽离出来，作为一个公共组件。公共组件常用的目录结构如下（其中Galle

ゝ一纸荒年。/ 2021年09月16日 03:30/ 0 赞/ 416 阅读

相关 Vue页面骨架—— 组件拆分

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朱雀/ 2021年07月25日 15:48/ 0 赞/ 461 阅读