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) { // 生产环境注入CDN config.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: { // 生产环境自动删除console compress: { drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true })
以上是一些Vue上线打包优化的技巧,通过禁用sourceMap、关闭预取、路由懒加载、按需加载Element UI组件、使用CDN加载外部资源、使用Gzip压缩、图片压缩和代码压缩等方式,可以使您的Vue应用程序更加高效、快速地运行在生产环境中。根据您的实际需求,选择适合您项目的优化方式,以提供更好的用户体验和性能。来源:B站UP——程序员小伙伴