【Vue CLI4】打包优化，通过externals配合cdn资源优化依赖项体积

最新推荐文章于 2024-05-06 18:15:30 发布

缝合怪

最新推荐文章于 2024-05-06 18:15:30 发布

阅读量2.7k

点赞数 1

分类专栏： JavaScript webpack vue 文章标签： vue.js

本文链接：https://blog.csdn.net/xzxlemontea/article/details/108879220

版权

本文介绍了如何在 Vue CLI4 项目中通过创建 vue.config.js 文件并利用 chainWebpack 配置打包入口，以实现发布模式下对 vue、vue-router、axios 和 vant 等依赖的 externals 配置，从而在运行时从 CDN 获取这些依赖，优化项目打包后的体积。官方解释了 externals 的作用，它能避免将特定包打包进 bundle，减少包大小。

摘要由CSDN通过智能技术生成

打包优化前的体积：

打包优化后的体积：

一、项目根目录创建vue.config.js，通过chainWebpack配置打包入口，这样我们就可以针对发布和开发两种模式使用不同的打包入口，具体代码如下：

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}