如何解决 Vue 打包 vendor 过大的问题？Webpack 打包 vue 速度慢怎么办

解决 Vue 打包 vendor 过大和 Webpack 打包速度慢的问题，需要从代码优化、配置调整和工具使用等多方面入手。以下是具体解决方案：

1. 路由懒加载

   使用 vue-router 的动态导入功能，将路由按需加载，减少初始包体积。

   const Foo = () => import('./Foo.vue');

2. Gzip 压缩

   通过 Webpack 插件（如 compression-webpack-plugin）生成 .gz 文件，服务器配置支持 Gzip 传输，显著减少文件大小。

   

3. CDN 引入第三方库

   将 Vue、Vue-Router 等库通过 CDN 引入，通过 externals 配置避免重复打包。

   externals: { vue: 'Vue', 'vue-router': 'VueRouter'}

4. DllPlugin 优化

   使用 DllPlugin 预编译第三方依赖（如 Vue、Axios），通过 DllReferencePlugin 引用，避免每次重新打包。

   

5. 代码分割与按需加载

   配置 Webpack 的 splitChunks，将公共依赖（如 Lodash、ElementUI）拆分为单独文件。

   optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[/]node_modules[/]/, name: 'vendors' } } }}

1. 版本升级

   确保 Webpack、Node.js 和 npm/yarn 为最新稳定版（如 Webpack 5 性能优于 4.x）。

2. 缩小 Loader 作用范围

   通过 include 和 exclude 限定 Babel、ESLint 等 Loader 的处理范围（如仅处理 src 目录）。

   module: { rules: [ { test: /.js$/, include: path.resolve('src'), use: 'babel-loader' } ]}

3. 多线程打包

   使用 thread-loader 或 HappyPack（Webpack 4）并行处理 Loader 任务。

   { test: /.js$/, use: [ 'thread-loader', 'babel-loader' ]}

4. 关闭非必要配置

   生产环境禁用 sourceMap 和 ESLint 校验，或通过 husky 仅在提交前校验。

   devtool: false, // 关闭 sourceMap

5. 缓存优化

   启用 Babel 和 Terser 缓存，避免重复编译。

   use: { loader: 'babel-loader', options: { cacheDirectory: true }}

6. 解析配置优化

   精简 resolve.extensions 和 resolve.alias，减少文件查找时间。

   resolve: { extensions: ['.js', '.vue'], // 避免过长列表 alias: { '@': path.resolve('src') }}

7. 分析工具定位瓶颈

   使用 webpack-bundle-analyzer 可视化分析包体积，或通过 speed-measure-webpack-plugin 测量各阶段耗时。

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;plugins: [new BundleAnalyzerPlugin()]

• 减少依赖嵌套：避免过度拆分组件，合理设计目录结构。
• 压缩代码：启用 TerserPlugin 压缩 JS，css-minimizer-webpack-plugin 压缩 CSS。
• 动态链接库（DLL）：对不常更新的库（如 React、Lodash）单独打包。

• vendor 过大：优先使用路由懒加载、CDN 和 DllPlugin。
• 打包速度慢：升级工具链、多线程处理、关闭非必要配置。
• 综合分析：通过可视化工具定位问题，针对性优化。

以上方法需结合项目实际情况调整，建议逐步验证效果（如每次修改后测试打包时间和体积变化）。