vue打包优化

### Vue 项目打包优化性能与减小体积的 Webpack 配置 #### 使用 Tree Shaking 减少无用代码 Vue 项目可以通过启用 Tree Shaking 来移除未使用的模块，从而减少最终打包后的文件大小。为了实现这一目标，需要确保 JavaScript 文件采用 ES Module 的语法编写，并在 Webpack 中设置 `mode` 为 `'production'` 或手动开启 `optimization.usedExports`[^1]。 ```javascript // vue.config.js module.exports = { configureWebpack: { optimization: { usedExports: true, // 启用 Tree Shaking }, }, }; ``` #### 按需加载组件 通过动态导入 (`import()`) 实现按需加载功能，能够显著降低初始加载时间并分担资源压力。对于大型应用而言，这是一项非常重要的优化措施[^2]。 ```javascript const MyComponent = () => import('./components/MyComponent.vue'); export default { components: { MyComponent }, }; ``` #### 压缩代码与去除调试信息 利用 TerserPlugin 对生产环境下的 JS 和 CSS 进行压缩处理，同时删除不必要的注释以及开发阶段留下的日志语句等冗余数据[^1]。 ```javascript // vue.config.js const TerserPlugin = require('terser-webpack-plugin'); module.exports = { configureWebpack: { optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: true, // 移除 console 调试信息 }, }, }), ], }, }, }; ``` #### 利用 Babel 插件精简依赖库 针对像 Element UI 这样的第三方组件库，可通过安装 `babel-plugin-component` 并对其进行配置来仅引入所需的样式和功能部分，进而削减整体包体尺寸[^4]。 ```bash npm install babel-plugin-component --save-dev ``` ```javascript // .babelrc { "plugins": [ ["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }] ] } ``` #### 缓存机制加速增量编译过程 适当调整缓存策略有助于加快多次构建间的效率差异。例如，在 loader 层面加入 cacheDirectory 参数即可让其支持磁盘级缓存操作[^3]。 ```javascript // vue.config.js module.exports = { chainWebpack(config) { config.module.rule('js').use('babel-loader') .tap(options => ({ ...options, cacheDirectory: './node_modules/.cache/babel', // 开启本地缓存目录 })); }, }; ``` #### 图片及其他静态资产优化 图片和其他类型的媒体文件往往占据较大比例的空间占用量，因此有必要采取相应手段加以控制。比如使用 image-minimizer-webpack-plugin 工具来进行图像质量缩减工作；或者将小型图标转换成 base64 格式的字符串嵌入 HTML/CSS 当中以节省 HTTP 请求次数[^2]。 ```javascript // vue.config.js const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new ImageMinimizerPlugin({ minimizerOptions: { encodeLevel: 0.75, // 设置 JPEG/PNG/WebP/SVG 的编码级别 (范围：0~1) }, }), ], }, }; ``` ---