前端打包cdn或者dll打包方式

前端项目打包时，为优化性能和减少体积，常采用 ‌CDN 引入‌ 或 ‌DLL 打包‌ 两种方式来处理第三方依赖。以下是核心区别与使用方法：

‌ 一、CDN 方式（通过 externals）‌

‌原理‌：将如 Vue、React、Axios 等不常变动的第三方库从打包中排除，改由外部 CDN 加载。

‌优点‌：

减小打包体积（通常可压缩 80%+）‌
利用浏览器缓存，提升加载速度
配置简单，适合大多数项目

‌配置步骤‌：

在 vue.config.js 或 Webpack 配置中设置 externals：

javascript 复制代码

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'axios': 'axios',
      'echarts': 'echarts'
    }
  }
}

在 public/index.html 中通过

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

‌注意事项‌：

确保 CDN 资源版本与本地一致 ‌
推荐使用稳定 CDN：jsDelivr、UNPKG、CDNJS ‌

二、DLL 打包方式（Dynamic Link Library）‌

‌原理‌：将第三方库预先单独打包成一个 DLL 文件（如 vendor.dll.js），并在主构建中引用，避免重复编译。

‌优点‌：

极大提升打包速度（尤其大型项目）‌
不依赖外部网络，适合内网或私有部署环境

‌配置步骤‌：

创建 webpack.dll.config.js：

javascript 复制代码

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'axios', 'echarts']
  },
  output: {
    path: path.resolve('./dll'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_library',
      path: path.resolve('./dll/[name]-manifest.json')
    })
  ]
};

在 package.json 中添加脚本：

javascript 复制代码

"scripts": {
  "build:dll": "webpack --config webpack.dll.config.js"
}

在主配置 vue.config.js 中引入 DLL：

javascript 复制代码

const webpack = require('webpack');
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DllReferencePlugin({
        manifest: require('./dll/vendor-manifest.json')
      })
    ]
  }
};

在 index.html 中手动引入生成的 DLL 文件：

javascript 复制代码

<script src="./dll/vendor.dll.js"></script>

‌缺点‌：

需要预构建 DLL，流程稍复杂 ‌
所有子应用必须使用相同版本依赖，否则可能冲突 ‌

三、如何选择？‌

场景	推荐方式
项目部署在公网，有稳定网络	CDN（externals）‌
项目在内网或无法访问外部 CDN	DLL 打包‌ ‌
追求极致打包速度且依赖稳定	DLL‌
简单快速优化，减少体积	‌CDN‌

💡 ‌建议‌：优先尝试 CDN 方式，因其配置简单、维护成本低；若对网络依赖敏感或需完全离线构建，则选 DLL。

如需进一步分析打包结构，可使用 webpack-bundle-analyzer 查看体积分布 ‌