Vue上线打包优化
在开发Vue项目时，我们通常需要对项目进行打包和优化，以便在生产环境中提供更高性能的应用程序。本篇博客将介绍一些Vue上线打包优化的技巧，帮助您优化应用程序的加载速度和性能。
一、禁止生成sourceMap文件
Vue项目在打包过程中，默认会生成sourceMap文件。sourceMap的主要作用是让打包后的文件像未压缩的代码一样，方便调试和定位错误。然而，在生产环境中我们通常不需要这些文件，因为它们会增加应用程序的体积。您可以在vue.config.js中配置禁止生成sourceMap文件：
// vue.config.js
module.exports = {productionSourceMap: false, // 是否在构建生产包时生成sourceMap文件，false将提高构建速度
}
二、关闭预取（Prefetch）
Vue CLI 3默认开启了预取（Prefetch）功能，即在首屏加载时预先获取用户未来可能会访问的内容。这可能会导致一些不必要的流量消耗。如果您的项目对流量有限制，可以考虑关闭预取功能。在vue.config.js中设置如下：
// vue.config.js
module.exports = {chainWebpack: config => {// 移除prefetch插件config.plugins.delete('prefetch')// 或者修改它的选项：config.plugin('prefetch').tap(options => {options[0].fileBlacklist = options[0].fileBlacklist || []options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)return options})}
}
三、路由懒加载
对于某些页面，我们可能希望将其下的所有组件打包到同一个异步块（chunk）中，以减少首屏加载时的请求数量。可以使用特殊的注释语法来提供chunk name，从而实现路由懒加载：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
四、按需加载Element UI组件
Vue项目打包后，如果使用了完整的Element UI组件库，会增加项目的体积。为了减小打包后的体积，我们可以按需引入Element UI组件。在Vue CLI 3.x版本中，配置文件为babel.config.js，可以按照以下步骤进行配置：
- 安装babel插件：
npm install babel-plugin-component -D在
babel.config.js中配置如下：module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]] }五、使用CDN加载外部资源
对于一些常用的外部资源，如Vue、Vuex、Vue Router、Axios等，我们可以通过CDN方式引入，以减少打包后的文件体积。以下是在
vue.config.js中配置CDN加载的核心代码：const isProduction = process.env.NODE_ENV === 'production'; const cdn = {css: [],js: ['https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js','https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js','https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js','https://cdn.bootcss.com/axios/0.18.0/axios.min.js',] } module.exports = {chainWebpack: config => {// 生产环境配置if (isProduction) {// 生产环境注入CDNconfig.plugin('html').tap(args => {args[0].cdn = cdn;return args;});}},configureWebpack: config => {if (isProduction) {// 用CDN方式引入config.externals = {'vue': 'Vue','vuex': 'Vuex','vue-router': 'VueRouter','axios': 'axios'}}}, }在
index.html中，我们可以根据CDN加载外部资源的配置动态添加对应的CSS和JS文件。六、使用Gzip进行压缩
在打包完成后，我们可以进一步使用Gzip对打包后的文件进行压缩，以减小文件大小。首先，安装
compression-webpack-plugin插件：npm install compression-webpack-plugin -D然后在
vue.config.js中引入插件并配置压缩选项：const CompressionPlugin = require('compression-webpack-plugin')configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production'return {plugins: [new CompressionPlugin({test: /\.js$|\.html$|\.css/, //匹配文件名threshold: 10240, //对超过10k的数据进行压缩deleteOriginalAssets: false //是否删除原文件})]}} }七、图片压缩
对于项目中的图片资源，可以使用
image-webpack-loader对图片进行压缩，从而减小图片的体积。首先，安装image-webpack-loader：npm install image-webpack-loader --save-dev然后在
chainWebpack中新增以下代码：config.plugins.delete('prefetch') config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use('image-webpack-loader').loader('image-webpack-loader').options({ bypassOnDebug: true })八、代码压缩
最后一步是对代码进行压缩，以去除不必要的代码和注释。我们可以使用
uglifyjs-webpack-plugin插件来实现。首先，安装插件：npm install -D uglifyjs-webpack-plugin然后在
configureWebpack中加入以下代码:const UglifyJsPlugin = require('uglifyjs-webpack-plugin')new UglifyJsPlugin({uglifyOptions: {// 生产环境自动删除consolecompress: {drop_debugger: true,drop_console: true,pure_funcs: ['console.log']}},sourceMap: false,parallel: true })以上是一些Vue上线打包优化的技巧，通过禁用sourceMap、关闭预取、路由懒加载、按需加载Element UI组件、使用CDN加载外部资源、使用Gzip压缩、图片压缩和代码压缩等方式，可以使您的Vue应用程序更加高效、快速地运行在生产环境中。根据您的实际需求，选择适合您项目的优化方式，以提供更好的用户体验和性能。来源：B站UP——程序员小伙伴
