vue项目依赖文件拆分

作者:神秘网友 发布时间:2020-10-24 02:32:18

vue项目依赖文件拆分

vue项目依赖文件拆分

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

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

示例：

1）webpack配置文件修改

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

2）去除main.js中element-ui的引入
vue项目依赖文件拆分
3）html页面中引入vue、element-ui文件
vue项目依赖文件拆分

依赖文件拆分前后对比图
vue项目依赖文件拆分

vue项目依赖文件拆分相关教程

  1. Vuex数据管理详解

    Vuex数据管理详解 Vue路由守卫详解 Vuex是一个专为Vue.js应用开发的状态管理模式，集中式存储管理应用所有组件的状态。 Vuex遵循“单向数据流”理念，易于问题追踪以及提高代码可维护性。 Vue中多个视图依赖于同一状态时，视图间传参和状态同步比较困难，Vuex

  2. Springboot打包项目为war包或jar包

    Springboot打包项目为war包或jar包 1.先配置pow.xml文件 ?xml version=1.0 encoding=UTF-8?project xmlns=http://maven.apache.org/POM/4.0.0 xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance xsi:schemaLocation=http://maven.apache.org/POM/4.0.0 ht

  3. Ionic5项目android打包流程

    Ionic5项目android打包流程 Ionic5项目android打包流程 1、apk打包 2、生成jks（Java Key Store）文件 3、生成签名的apk文件 4、apk文件优化与重命名 ionic开发好应用以后，需要先进行打包、签名、优化，才能在各大应用商店中进行发布，本文就apk的打包、签名

  4. vue项目打包开启Gzip压缩

    vue项目打包开启Gzip压缩 vue 项目打包开启Gzip压缩 1. vue 步骤 安装 npm i compression-webpack-plugin -D 提供带 Content-Encoding 编码的压缩版的资源 webpack地址 使用—在 vue.config.js 文件中 const CompressionPlugin = require('compression-webpac

  5. 【Eelectron-vue】构建桌面应用（15）- 修改antdv输入框默认样式

    【Eelectron-vue】构建桌面应用（15）- 修改antdv输入框默认样式及表单校验提示信息 1.前言 现在的客户端与以往的有些区别，比如登录页面的输入框，大都废弃了之前的登录框样式，而采用只存在底边的输入框。还有就是输入框的错误信息都会采用浮层的形式提示，

  6. HCIA-RS项目实战案例

    HCIA-RS项目实战案例 文章目录 项目需求 企业拓扑结构 配置步骤 项目路由需求 项目互联网需求 实验拓扑及预配置，如果有需要的可以通过邮箱（ Email ： [emailprotected] ）联系我。 本篇是关于HCIA-RS的综合项目实验整理笔记。实验拓扑及配置步骤参考资料来

  7. vue造轮子之封装选择下拉树

    vue造轮子之封装选择下拉树 最近公司有个新需求,希望能有一个下拉选择树的功能，大概的功能和样式如下所示: 然后我的第一反应就是上elementui上找现成的组件，但是挺遗憾的就是element并没有提供这样的组件，所以只能自己动手造一个了。 1. 组件需求 (1) 支持

  8. Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色

    Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色 先在Table 表格 上加 上属性 el-table :data=tableList border :cell-style=columnStyle el-table-column type=index label=第一列 width=50px/el-table-column el-table-column type=index label