vue项目打包优化及配置vue.config.js文件（实测有用）(vue打包速度优化)

vue项目打包优化及配置vue.config.js文件（实测有用） 首先我们需要在根目录里创建一个vue.config.js

推荐整理分享vue项目打包优化及配置vue.config.js文件（实测有用）(vue打包速度优化)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue项目打包优化方案,vue项目打包优化方案,vue项目打包运行,vuecli打包优化,vue3打包优化,vue webpack打包优化,vue项目打包优化方案,vue3打包优化,内容如对您有帮助，希望把文章链接给更多的朋友！

首先在文件中先写入//打包配置文件module.exports = { assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏） productionSourceMap: false, //不输出map文件};之后再使用CDN 加速优化(此代码在module.exports对象外面)cdn加速可以去官网找到相应插件的路径 BootCDN官网// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = { // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称） externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT' //这里需要注意下 }, // cdn的css链接 css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css' //引入element ui css文件 ], // cdn的js链接 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.min.js', 'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.27.2/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js' ]}

在module.exports对象里写入

chainWebpack: config => { // ============注入cdn start============ config.plugin('html').tap(args => { // 生产环境或本地需要cdn时，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ },对图片文件进行压缩

下载依赖 这里如果用npm 可能会下载速度慢安装失败，建议使用cnpm

cnpm 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 })对代码压缩

先下载依赖 也建议使用cnpm

cnpm install uglifyjs-webpack-plugin --save-dev

在module.exports对象里写入

configureWebpack: config => { if (isProduction || devNeedCdn) config.externals = cdn.externals // 代码压缩 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { //生产环境自动删除console compress: { drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true }) ) },对公共代码抽离

在configureWebpack里继续写入

// 公共代码抽离 config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 60 }, styles: { name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } }最后整合起来vue.config.jsconst UglifyJsPlugin = require('uglifyjs-webpack-plugin')// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = { // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称） externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios' }, // cdn的css链接 css: [ ], // cdn的js链接 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.min.js', 'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.27.2/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js' ]}//打包配置文件module.exports = { assetsDir: 'static', publicPath: './', productionSourceMap: false, //不输出map文件 chainWebpack: config => { // ============注入cdn start============ config.plugin('html').tap(args => { // 生产环境或本地需要cdn时，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ // 在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 }) }, configureWebpack: config => { if (isProduction || devNeedCdn) config.externals = cdn.externals // 代码压缩 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { //生产环境自动删除console compress: { drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true }) ) // 公共代码抽离 config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 60 }, styles: { name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } } }, devServer: { proxy: { '/api': { target: '线上接口地址', ws: true, changeOrigin: true, pathRewrite: { '^/api': '/', // 根据之前vuejs的配置，用来拿掉URL上的（/api），但是暂时没有什么效果 }, }, }, },};最后我的vue项目由原来的12M减少到2M，启动也是成功