针对Vue打包生成的vendor和app文件过大的优化

痛定思痛。 2022-10-29 01:41 56阅读 0赞

### 文章目录 ###

*   *  1、组件按需引入
     *   *  element-ui按需引入
     *  2、去掉生成map文件
     *  3、cdn引入
     *  4、路由懒加载
     *  5、代码压缩

## 1、组件按需引入 ##

### element-ui按需引入 ###

1、安装element-ui  
npm install element-ui --save  
因为element-ui是依赖于element，所以也需要安装此  
npm install element --save  
2、 npm install babel-plugin-component -D  
3、 在.babelrc文件中添加此段代码

"plugins": [
      [
       "component",
       { 
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
       }
      ]
     ]

当然这里如果有其他的配置，只需要在 plugins 的数组中继续添加我们需要的配置代码就行了  
4、将按需引入的代码单独分割一下，在 src 文件夹中新建 element 文件夹，并在里面新建一个 index.js 文件  
// 导入自己需要的组件

import {  Table, TableColumn, Pagination, Button,MessageBox } from 'element-ui'
    const element = { 
     install: function (Vue) { 
     	//使用 Vue.use() 默认会调用 install 方法
    	//普通组件
    	Vue.use(Table)
        Vue.use(TableColumn)
        Vue.use(Pagination)
        Vue.use(Button)
        //MessageBox略有不同
        Vue.prototype.$msgbox = MessageBox
        //使用 this.$msgbox.alert
     }
    }
    export default element

5、在 main.js 中使用该文件，就大功告成了  
// css样式还是需要全部引入

import 'element-ui/lib/theme-chalk/index.css'
    import element from './element/index'
    Vue.use(element)

## 2、去掉生成map文件 ##

打包时会生成map文件，而map文件一般都比较大，可以取消生成map文件  
config/index.js

{ 
    	productionSourceMap:false
    }

## 3、cdn引入 ##

通过外部引入的方式引入外部文件，从而减少打包文件过大的问题  
1、配置  
webpack.base.conf.js

externals:{ 
      "vue":"Vue",
    },

2、index.html

引入外部文件，并且加上

3、main.js

去掉在页面引入vue和vue-router