- 打包过程:从 main.js 开始出发,寻找项目中需要使用到的依赖,最终交由webpack进行打包
2.我们是否需要把第三方的库全部打包到自己的项目中呢?
比如 elementUI 文件就很大,而且这类插件长期不需要我们进行更新,所以没有必要打包进来!
3.思路
实现打包发布减少包体积排除第三方
通过配置vue-cli把一些平常不需要用的包排除在打包文字之外。
例如:让 webpack
不打包 vue
element
等等
1.先找到 vue.config.js
, 添加 externals
项,具体如下
此选项作用, 告诉webpack排除掉这些包, 不进行打包
==一定要去修改掉引入Element用的变量名, 这里要匹配去替换==
==因为cdn里的源代码配置在ELEMENT这个变量上==
configureWebpack: {
externals: {
// 基本格式:
// '包名' : '在项目中引入的名字'
'echarts': 'echarts',
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'dayjs': 'dayjs',
'element-ui': 'ELEMENT',//一定要记得在项目里把element-ui的引入名改为ELEMENT
'vue-quill-editor': 'VueQuillEditor',
'vuex-persistedstate': 'createPersistedState'
}
}
配置后再次运行 npm run build 打包生成的dist文件内存小很多