1.vue3.0配置第三方插件不打包
配置第三方插件不打包采用cdn引入是比较常见的减小包体积的办法,因为第三方插件最终打包都会打包到vendor.js中,这就导致了包的体积比较大
对比
打包前:chunk-vendor.js 911kb,还有一个包也有九百多估计也是第三方插件导致的
打包后:chunk-vendor.js 147kb
但是:cdn引入的话需要开率cdn如果出问题项目就崩了,有时候我们也会把文件下载到本地然后本地引入,这样的话就相当于把大文件拆成很多小文件了,
- vue.config.js
externals: {
vue: 'Vue',
echarts: 'echarts',
lodash: '_',
'element-plus': 'ElementPlus'
},
html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- element-plus -->
<link
rel="stylesheet"
href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"
/>
</head>
<body style="margin: 0;overflow: hidden;">
<div id="app"></div>
<!-- vue -->
<script src="https://unpkg.com/vue@next"></script>
<!-- echarts -->
<script src="<%= BASE_URL %>plugins/echarts.min.js"></script>
<!-- lodash -->
<script src="<%= BASE_URL %>plugins/lodash.min.js"></script>
<!-- element-plus -->
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
</body>
</html>
2.升级element-plus版本
原先版本：1.0.2-beta.65
新版本：^1.2.0-beta.3
按照官网提供的步骤
npm uni element-plus
npm uni babel-plugin-import
npm i element-plus
npm i unplugin-vue-components // 按需引入的插件
结果运行之后发现一堆报错
然后需要修改vue.config.js配置文件
新增下面的配置
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
}
]
},
然后就可以了
