webpack打包发布npm包优化-vue/echarts等公共库抽离
Author：zhoulujun Date：
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。
如果我们打包的时候不想将vue、echarts等公共库包含在内，需要配置两处地方,
externals
https://webpack.docschina.org/configuration/externals/
设置 webpack 的 externals 来直接引用 cdn 上的 Vue，然后用 import('echarts') 来异步加载 echarts（会单独打包），或者也用 externals。
下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、element-ui、vuex等第三方库，那么我们的目标就是把这些从输出的 bundle 中排除依赖。
// externals中的key是后面需要require的名字，value是第三方库暴露出来的方法名
const webpackConfig = {
// 移除已从cdn引入的组件，不打包以下命名的内容
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
},
};
module.exports = {
configureWebpack: { // 判断是否是开发还是生产,根据环境不同设置externals
externals: process.env.NODE_ENV === 'production' ? assetsCDN.externals : {},
},
}然后在html文件引入这些库CDN资源即可，当然也可以es6 import引入
如果是webpack打包，可以不打包这些公共库，但是在引入
"peerDependencies": {
"dayjs": "^1.10.7",
"axios": "^0.21.1"
},需要在package.json声明
转载本站文章《webpack打包发布npm包优化-vue/echarts等公共库抽离》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2022_0519_8819.html