Vue2项目打包怎么配置 vue.config.js 优化打包体积与CDN引入-Vue.js-PHP中文网

vue2项目cdn优化核心是通过externals排除vue、vue-router、vuex等稳定大库，改由cdn提供，需严格匹配全局变量名（如vue→vue），并在index.html中注入对应cdn链接，开发与生产环境分离配置。

vue2项目打包怎么配置 vue.config.js 优化打包体积与cdn引入

Vue2项目打包体积优化，核心是减少主包中第三方库的体积，CDN引入是最直接有效的方式。关键不在“加功能”，而在“减依赖”——把稳定、不常更新的库从打包中剔除，改由CDN提供。

明确哪些库适合走CDN

不是所有依赖都适合CDN，优先选版本稳定、全局使用、体积大的库：

Vue核心库：vue、vue-router、vuex（注意版本兼容，如 vue@2.6.x）
常用工具库：axios、lodash、moment、dayjs、echarts
UI组件库：element-ui、vant（需确认CDN提供完整构建版，含CSS）
避免CDN化：业务组件、频繁迭代的自定义封装、带动态import的模块

vue.config.js 中配置 externals 排除打包

这是CDN生效的前提——告诉Webpack：“这些库别打进去，运行时会全局存在”。配置要严格匹配全局变量名：

vue → Vue（注意首字母大写）
vue-router → VueRouter（连字符转驼峰，首字母大写）
vuex → Vuex
axios → axios（小写，与官方UMD导出一致）
element-ui → ELEMENT（官方文档指定）

示例配置：

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.externals = {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        axios: 'axios',
        'element-ui': 'ELEMENT'
      }
    }
  }
}

在 index.html 中注入 CDN 资源链接

externals只是“不打包”，资源还得加载进来。推荐通过 html-webpack-plugin 的 cdn 参数动态注入，兼顾开发/生产环境：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

生产环境注入 JS/CSS CDN 地址（含版本号，避免缓存问题）
开发环境保持本地 node_modules 引入，不影响热更新和调试
CSS 类库（如 element-ui）必须同时注入 CSS CDN，否则样式丢失

示例片段：

const cdn = {
  build: {
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.runtime.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.5.4/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js'
    ],
    css: [
      'https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css'
    ]
  },
  dev: { js: [], css: [] }
}
<p>module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].cdn = process.env.NODE_ENV === 'production' ? cdn.build : cdn.dev
return args
})
}
}</p>

然后在 public/index.html 的中添加：

<!-- inject cdn -->

  <script src="<%=%20htmlWebpackPlugin.options.cdn.js[i]%20%>"></script><link href="<%=%20htmlWebpackPlugin.options.cdn.css[i]%20%>" rel="stylesheet">